Карусель из коментариев на jquery

Question

Есть задача сделать в проекте карусель из комментариев, что бы при клике на "next" "prev", отображались соответствующие блоки с комментариями. Использовал такой код:

$(document).ready(function() {
    $(".reviews__arrow-prev, .reviews__arrow-next").click(function(){   
        $a = $(".reviews__wrapper .reviews__content");
        
        $x = $(this).hasClass('reviews__arrow-prev') ? $a.prev() : $a.next(); 
        
        if($x.length > 0) {      
            $x.add($a).toggleClass('reviews__content_active');      
        }
    });
});

По итогу, при клике класс активности присваивается сразу всем неактивным .reviews__content в родителе и соответственно отображается сразу пачка блоков. Как правильно сделать, что бы класс активности присваивался поочерёдно каждому блоку в родителе .reviews__wrapper?

https://codepen.io/Siegerus/pen/yLrmJNR

Если что, прошу извинить за возможные косяки в оформлении, т.к. совсем новичок во всём этом.

Answer 1

$(document).ready(function() {
  $(".reviews__arrow-prev, .reviews__arrow-next").click(function() {
    let $reviews = $(".reviews__wrapper .reviews__content");
    let currentActiveElementIndex = $reviews.index($(".reviews__wrapper .reviews__content.reviews__content_active"));
    let newActiveElementIndex = 0;

    if ($(this).hasClass('reviews__arrow-next')) {
      newActiveElementIndex = currentActiveElementIndex + 1 === $reviews.length ? 0 : currentActiveElementIndex + 1;
    } else {
      newActiveElementIndex = currentActiveElementIndex - 1 < 0 ? $reviews.length - 1 : currentActiveElementIndex - 1;
    }

    $reviews.removeClass('reviews__content_active');
    $reviews.eq(newActiveElementIndex).addClass('reviews__content_active');
  });
});

.reviews__content {
  display: none;
}

.reviews__content_active {
  display: block;
}

.reviews__arrow-prev,
.reviews__arrow-next {
  width: 60px;
  height: 40px;
  background-color: coral;
}

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>

<body>
  <section id="to-reviews" class="reviews">
    <div class="container">
      <h2 class="title">Отзывы <span class="title title_red">Обо мне</span></h2>
      <h3 class="reviews__subtitle title title_fz30">
        Вы также можете <span class="title title_red title_fz30 title_nobrd">оставить отзыв</span> анонимно или с именем
      </h3>
      <button class="reviews__button"><span>Оставить отзыв</span></button>
      <div class="reviews__wrapper">
        <div class="reviews__content reviews__content_active">
          <div class="reviews__item">
            <div class="reviews__body">
              <div class="reviews__header">

                <div class="reviews__name">Mariia</div>
              </div>
              <div class="reviews__comment">Блок №1
              </div>
              <div class="reviews__request"><span>&mdash;</span> </div>
            </div>
          </div>
          <div class="reviews__item">
            <div class="reviews__body">
              <div class="reviews__header">
                <div class="reviews__name">No name</div>
              </div>
              <div class="reviews__comment">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore officiis quasi aspernatur? Fuga doloremque nisi quos sit eos eligendi aperiam veritatis, numquam suscipit ullam reiciendis laborum iusto similique excepturi iste sint natus
                nesciunt magni eaque omnis atque quod placeat minima? Et harum non necessitatibus nulla voluptas asperiores quibusdam pariatur at.
              </div>
              <div class="reviews__request"> <span>&mdash;</span> Отношения с партнером</div>
            </div>
          </div>
        </div>

        <div class="reviews__content">
          <div class="reviews__item">
            <div class="reviews__body">
              <div class="reviews__header">
                <div class="reviews__name">Mariia</div>
              </div>
              <div class="reviews__comment">Блок №2
              </div>
              <div class="reviews__request"><span>&mdash;</span></div>
            </div>
          </div>
          <div class="reviews__item">
            <div class="reviews__body">
              <div class="reviews__header">
                <div class="reviews__name">No name</div>
              </div>
              <div class="reviews__comment">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet culpa reprehenderit vitae totam voluptates, laborum minima hic quibusdam aliquid perferendis provident voluptatum ea eligendi consequatur, eum inventore quam corrupti obcaecati
                delectus architecto consectetur aspernatur nesciunt. Quaerat debitis eos ullam reiciendis?
              </div>
              <div class="reviews__request"> <span>&mdash;</span> Отношения с партнером</div>
            </div>
          </div>
        </div>
        <div class="reviews__content">
          <div class="reviews__item">
            <div class="reviews__body">
              <div class="reviews__header">
                <div class="reviews__name">Mariia</div>
              </div>
              <div class="reviews__comment">Блок №3
              </div>
              <div class="reviews__request"><span>&mdash;</span></div>
            </div>
          </div>
          <div class="reviews__item">
            <div class="reviews__body">
              <div class="reviews__header">
                <div class="reviews__name">No name</div>
              </div>
              <div class="reviews__comment">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet culpa reprehenderit vitae totam voluptates, laborum minima hic quibusdam aliquid perferendis provident voluptatum ea eligendi consequatur, eum inventore quam corrupti obcaecati
                delectus architecto consectetur aspernatur nesciunt. Quaerat debitis eos ullam reiciendis?
              </div>
              <div class="reviews__request"> <span>&mdash;</span> Отношения с партнером</div>
            </div>
          </div>
        </div>
        <div class="reviews__content">
          <div class="reviews__item">
            <div class="reviews__body">
              <div class="reviews__header">
                <div class="reviews__name">Mariia</div>
              </div>
              <div class="reviews__comment">Блок №4
              </div>
              <div class="reviews__request"><span>&mdash;</span></div>
            </div>
          </div>
          <div class="reviews__item">
            <div class="reviews__body">
              <div class="reviews__header">
                <div class="reviews__name">No name</div>
              </div>
              <div class="reviews__comment">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet culpa reprehenderit vitae totam voluptates, laborum minima hic quibusdam aliquid perferendis provident voluptatum ea eligendi consequatur, eum inventore quam corrupti obcaecati
                delectus architecto consectetur aspernatur nesciunt. Quaerat debitis eos ullam reiciendis?
              </div>
              <div class="reviews__request"><span>&mdash;</span> Отношения с партнером</div>
            </div>
          </div>
        </div>
        <div class="reviews__arrow-prev">Prev</div>
        <div class="reviews__arrow-next">Next</div>
      </div>
    </div>
  </section>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Карусель из коментариев на jquery

Ответы (1 шт):