Aggiorna 'Owl Carousel' Pagina 'nelle schede Evento + Bootstrap

Question

Sto cercando di utilizzare sia Owl Carousel che Bootstrap per creare schede con un carousel continuo per la navigazione delle schede. Voglio anche che queste schede funzionino automaticamente.

Ecco un riferimento visivo:

Ed ecco un violino:

https://jsfiddle.net/j28md74n/

Il JS principale che sto usando (Ho commentato le aree dove sono bloccato):

var owlTab = $(".tab-carousel.owl-carousel"); 

    owlTab.owlCarousel({ 
     navigation: false, 
     dots:true, 
     navigationText: [ 
      "<i class='fa fa-angle-left'></i>", 
      "<i class='fa fa-angle-right'></i>" 
     ], 
     items : 4, 
     lazyLoad : false, 
     autoPlay : false, 
     draggable: true, 
     stopOnHover : true, 
     paginationSpeed : 1000, 
     transitionStyle:"fade", 
     responsive: true, 
     loop: true, 
     rewindNav: true, 
    }); 

    $(document).ready(function() { 
     if ($('.tab-carousel.owl-carousel').length){ 
      $('.tab-carousel.owl-carousel .owl-item').attr("role", "presentation"); 
      $('.tab-carousel.owl-carousel .owl-item:first-child').addClass('active'); 
     }; 
     $(".tab-carousel.owl-carousel .owl-item").click(function() { 
      $(".tab-carousel.owl-carousel .owl-item").removeClass('active'); 
      $(this).addClass("active"); 
     }); 
    }); 

    var tabCarousel = setInterval(function() { 
     var tabs = $('.tab-carousel.owl-carousel .owl-item'), 
      active = tabs.filter('.active'), 
      next = active.next('.owl-item'), 
      toClick = next.length ? next.find('a') : tabs.eq(0).find('a'); 
      var indexNum = active.index(); 
      console.log(indexNum); 
      if (indexNum > 2){ 
       $('.owl-pagination .owl-page:eq(0)').removeClass("active"); 
       $('.owl-pagination .owl-page:eq(1)').addClass("active"); 
       // Here's where I want to change the owl carousel 'page'...to page '2' 
      }; 
      if (indexNum <= 2){ 
       $('.owl-pagination .owl-page:eq(0)').addClass("active"); 
       $('.owl-pagination .owl-page:eq(1)').removeClass("active"); 
       // Here's where I want to change the owl carousel 'page' ...to page '1' 
      }; 
     toClick.trigger('click'); 
    }, 6000); 

Sono in grado di ottenere la maggior parte di ciò che desidero, tuttavia, quando ".active" ".owl-item" è il quinto elemento o sopra (ad es. sull'altra "pagina" del carosello del gufo si aggiorna anche la "pagina" del carosello del gufo. Ci sono 4 articoli per pagina del carosello del gufo. Attualmente, come ho fatto io, se il '.owl-item' passa ciclicamente oltre il quinto elemento, la pagina del carosello del gufo rimane sul primo.

Grazie in anticipo per eventuali approfondimenti!

Answer 1

Non sono sicuro, ma penso che il problema è il modo in cui si sta determinando l'indexNum ..

ho dovuto riconfigurare come trovare indice corrente, ma questo potrebbe funzionare.

working example.

function animationLoop() { 
    // Increment Active IDX each Loop 
    activeIdx++; 

    // Reset Active IDX if > tabs.length 
    if (isEnd(activeIdx, tabs)) setIdx(0); 

    console.log("Current IDX", activeIdx); 

    // Click on the current active index 
    $(carouselItems[ activeIdx ]).find('a').trigger('click'); 

    // console.log("Clicking This", carouselItems[ activeIdx ].innerText); 

    // Reset Loop 
    setTimeout(animationLoop, 3000); 
}