Problema di navigazione con più Owl Carousels sulla stessa pagina

26 gen 2017, 12:50:48
Visualizzazioni: 4.35K
Voti: 0

La pagina indice del mio WordPress include un loop che divide i post per mesi. Per visualizzare ogni mese sto usando Owl Carousel 2. Sto riscontrando alcune difficoltà con la navigazione di ogni carosello/mese. Infatti, la mia navigazione consiste in due pulsanti "Next" e "Prev", e ogni volta che li clicco attiva la nav per tutti i caroselli nella pagina.

Ho trovato una risposta che corrisponde allo stesso problema, ma il problema continua a darmi dei grattacapi. (https://stackoverflow.com/questions/22054606/jquery-each-function-for-multiple-carousels-next-prev-identifier-issue)

Ecco il codice JS per i caroselli:

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

Grazie per il tuo aiuto!

Mathieu Préaud
Mathieu Préaud
203