Múltiples carruseles Owl en la misma página con problema de navegación

26 ene 2017, 12:50:48
Vistas: 4.35K
Votos: 0

La página de inicio de mi WordPress incluye un bucle que divide mis publicaciones por meses. Para mostrar cada mes estoy usando Owl Carousel 2. Estoy experimentando algunas dificultades con la navegación de cada carrusel/mes. En efecto, mi navegación son dos botones "Siguiente" y "Anterior", y cada vez que hago clic en ellos activa la navegación para todos los carruseles de la página.

Encontré una respuesta que coincide con el mismo problema, pero el problema todavía me está dando dolores de cabeza. (https://stackoverflow.com/questions/22054606/jquery-each-function-for-multiple-carousels-next-prev-identifier-issue)

Aquí está el código JS para los carruseles:

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

¡Gracias por tu ayuda!

Mathieu Préaud
Mathieu Préaud
203