Update Owl Carousel 'Seite' auf Ereignis + Bootstrap Tabs

Question

Ich versuche, Owl Carousel und Bootstrap zu verwenden, um Registerkarten zu erstellen, die ein kontinuierliches Karussell für die Tab-Navigation haben. Ich möchte auch, dass diese Registerkarten automatisch durchlaufen werden.

Hier ist eine visuelle Referenz:

Und hier ist eine Geige:

https://jsfiddle.net/j28md74n/

Der Haupt JS, die ich (ich verwende ich die Bereiche auf Kommentar wo ich stecke):

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

Ich bin in der Lage, das meiste von dem zu erreichen, was ich möchte, wenn der '.active' '.owl-Gegenstand' der fünfte Gegenstand oder mehr ist (d. H. auf der anderen Eulenkarussell "Seite"), die das Eulenkarussell "Seite" ebenfalls aktualisiert. Es gibt 4 Artikel pro Eulenkarussell 'Seite.' Derzeit, so wie ich es habe, bleibt die Eulenkarussellseite auf der ersten Seite, wenn der '.owl-item' den fünften Eintrag durchläuft.

Vielen Dank im Voraus für alle Einsichten!

Answer 1

nicht sicher, aber ich denke, das Problem ist die Art und Weisen Sie die indexNum sind zu bestimmen ..

Ich musste reconfig wie aktuellen Index zu finden, aber dies funktionieren könnte.

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