carousel slider pure js

const rewiewCarousel = document.querySelector('.rewiew_carousel');
const rewiewItems = document.querySelectorAll('.rewiew_item');
const rewiewCircles = document.querySelectorAll('.rewiew_circle');

let currentSlide = 0;

// Function to show the active slide and its neighbors
function showSlide(n) {
  // Handle wrapping around if going beyond the last or first slide
  if (n < 0) {
    n = rewiewItems.length - 1;
  } else if (n >= rewiewItems.length) {
    n = 0;
  }

  // Reset classes to ensure a clean transition
  rewiewItems.forEach(item => {
    item.classList.remove('active', 'previous', 'next');
  });

  // Determine previous and next slides
  const previous = n - 1 >= 0 ? n - 1 : rewiewItems.length - 1;
  const next = n + 1 < rewiewItems.length ? n + 1 : 0;

  // Apply classes for positioning
  rewiewItems[n].classList.add('active');
  rewiewItems[previous].classList.add('previous');
  rewiewItems[next].classList.add('next');

  // Update active circle
  rewiewCircles.forEach((circle, index) => {
    circle.classList.remove('active');
  });
  rewiewCircles[n].classList.add('active');

  currentSlide = n;
}

// Event listeners for clicking on circles
rewiewCircles.forEach((circle, index) => {
  circle.addEventListener('click', () => {
    showSlide(index);
  });
});

// Initial slide
showSlide(currentSlide);

.rewiew {
  width: 100%;
  height: 100%;
}

.rewiews_wrapper {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.rewiew_carousel {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.rewiew_item {
  display: flex;
  max-width: 830px;
  min-height: 250px;
  border-radius: 40px;
  border: 1px solid rgba(0, 0, 0, 0.658);
  box-shadow: 2px 2px 6px #504f4f93;
  padding: 60px 65px 35px 150px;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.rewiew_item.active {
  opacity: 1;
  z-index: 2;
  transform: translate(0, 0);
}

.rewiew_item.previous {
  transform: translate(-120px, -120px);
}

.rewiew_item.next {
  transform: translate(120px, -120px);
}

.rewiew_item h4 {
  font-size: 36px;
  margin-bottom: 20px;
}

.rewiew_item p {
  font-size: 18px;
  line-height: 197%;
  margin-bottom: 20px;
}

.rewiew_item img {
  max-width: 180px;
  max-height: 180px;
  padding-left: -90px;
  position: absolute;
  border-radius: 50%;
  top: 20px;
  left: -70px;
  transition: transform 0.3s ease;
}

.marks_wrapper {
  position: absolute;
  top: -100px;
  right: 130px;
}

.rewiew_circles {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: -80px;
  /* Position below the carousel */
  left: 50%;
  transform: translateX(-50%);
}

.rewiew_circle {
  width: 30px;
  height: 30px;
  margin-right: 20px;
  border-radius: 50%;
  background-color: #8a8a8a;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.rewiew_circle.active {
  background-color: #E41D20;
  /* Active circle color */
}

<section class="reviews">
  <img class="element" src="img/element.svg" alt="element">
  <h2>Отзывы</h2>
  <div class="rewiews_wrapper">
    <div class="rewiew_carousel">
      <div class="rewiew_item active" id="slide1">
        <img src="img/rewiew_korchevnikova.jpg" alt="Александра Корчевникова">
        <div class="rewiew_text">
          <h4>Александра Корчевникова</h4>
          <p>Отличная автошкола, своим выбором однозначно довольна! Администраторы очень приятные и вежливые девушки, всегда готовы помочь, любой вопрос решается быстро и незамедлительно!</p>
          <div class="marks_wrapper">
            <img src="img/quotation_mark.svg" alt="quotation mark">
          </div>
        </div>
      </div>

      <div class="rewiew_item" id="slide2">
        <img src="img/rewiew_karpov.jpg" alt="Михаил Карпов">
        <div class="rewiew_text">
          <h4>Михаил Карпов</h4>
          <p>Мне очень повезло, что из всех автошкол я выбрал Дебют. Это самая лучшая автошкола - классный преподавательский состав, доступные материалы, а самое главное -теплая атмосфера.</p>
          <div class="marks_wrapper">
            <img src="img/quotation_mark.svg" alt="quotation mark">
          </div>
        </div>
      </div>

      <div class="rewiew_item" id="slide3">
        <img src="img/rewiew_romanov.jpg" alt="Данил Романов">
        <div class="rewiew_text">
          <h4>Данил Романов</h4>
          <p>Обучением доволен. Занятия по теории были интересными и продуктивными — в ГИБДД теорию сдал с первого раза. С вождением также было всё хорошо — внимательный и спокойный инструктор, доходчиво объясняет.</p>
          <div class="marks_wrapper">
            <img src="img/quotation_mark.svg" alt="quotation mark">
          </div>
        </div>
      </div>

      <div class="rewiew_item" id="slide4">
        <img src="img/rewiew_rogov.jpg" alt="Дмитрий Рогов">
        <div class="rewiew_text">
          <h4>Дмитрий Рогов</h4>
          <p>Мне очень понравилось обучение в автошколе, теория классно преподносится, и особенно понравились занятия по вождению</p>
          <div class="marks_wrapper">
            <img src="img/quotation_mark.svg" alt="quotation mark">
          </div>
        </div>
      </div>

      <div class="rewiew_item" id="slide5">
        <img src="img/rewiew_varenzova.jpg" alt="Дарья Варенцова">
        <div class="rewiew_text">
          <h4>Дарья Варенцова</h4>
          <p>Лучшая школа! Комфортное обучение, отличный инструктор! Однозначно буду рекомендовать друзьям</p>
          <div class="marks_wrapper">
            <img src="img/quotation_mark.svg" alt="quotation mark">
          </div>
        </div>
      </div>
    </div>
    <div class="rewiew_circles">
      <div class="rewiew_circle active"></div>
      <div class="rewiew_circle"></div>
      <div class="rewiew_circle"></div>
      <div class="rewiew_circle"></div>
      <div class="rewiew_circle"></div>
    </div>
  </div>
  </div>

  <img class="element" src="img/element.svg" alt="element">
</section>