Probleme de navigație cu multiple Owl Carousels pe aceeași pagină

26 ian. 2017, 12:50:48
Vizualizări: 4.35K
Voturi: 0

Pagina index a site-ului meu WordPress include o buclă care împarte postările pe luni. Pentru a afișa fiecare lună folosesc Owl Carousel 2. Am întâmpinat dificultăți cu navigarea fiecărui carusel/lună. Mai exact, am două butoane de navigare "Next" și "Prev", iar de fiecare dată când le apăs, se activează navigarea pentru toate caruselurile de pe pagină.

Am găsit un răspuns care se potrivește cu aceeași problemă, dar încă am dificultăți. (https://stackoverflow.com/questions/22054606/jquery-each-function-for-multiple-carousels-next-prev-identifier-issue)

Iată codul JS pentru caruseluri:

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++;
  }); 
});

Mulțumesc pentru ajutor!

Mathieu Préaud
Mathieu Préaud
203