Несколько каруселей Owl Carousel на одной странице с проблемой навигации

26 янв. 2017 г., 12:50:48
Просмотры: 4.35K
Голосов: 0

Главная страница моего WordPress включает цикл, разделяющий записи по месяцам. Для отображения каждого месяца я использую Owl Carousel 2. У меня возникают трудности с навигацией для каждой карусели/месяца. А именно, у меня есть две кнопки навигации "Вперед" и "Назад", и при клике на них активируется навигация для всех каруселей на странице.

Я нашел ответ, соответствующий той же проблеме, но она все еще доставляет мне головную боль. (https://stackoverflow.com/questions/22054606/jquery-each-function-for-multiple-carousels-next-prev-identifier-issue)

Вот JS-код для каруселей:

jQuery(document).ready(function($) {

  var carouselCount = 0;

  $('.index-carousel').each(function() {

    $(this).attr("id", "owl-carousel-" + carouselCount);

    var carouselID = $('#owl-carousel-' + carouselCount);

    carouselID.owlCarousel({
      loop:false,
      margin:2,
      autoplay:false,
      responsiveClass:true,
      responsive:{
          0:{
              items:1,
              nav:false
          },
          700:{
              items:2,
              nav:false
          }
      }
    });


    $('.monthly-row').parent().find(".carousel-nav.next").click(function(){
      carouselID.trigger('next.owl.carousel');
    });
    $('.monthly-row').parent().find(".carousel-nav.prev").click(function(){
      carouselID.trigger('prev.owl.carousel');
    });

    carouselCount++;
  }); 
});

Спасибо за помощь!