Zaktualizuj karuzelę sowa "Strona" na karcie zdarzenia i bootstrap

Question

Próbuję użyć zarówno Owl Carousel, jak i Bootstrap, aby utworzyć karty z ciągłą karuzelą do nawigacji po kartach. Chcę również, aby te zakładki automatycznie przełączały się.

Oto wizualne odniesienie:

A oto skrzypce:

https://jsfiddle.net/j28md74n/

Głównym JS że używam (byłem wykomentowane obszary gdzie utknąłem):

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

Jestem w stanie zrealizować większość tego, czego chcę, jednak gdy ".aktywny" "przedmiot-owalu" jest piąty lub wyższy element (tj. na innej "stronie" karuzeli sowa), że aktualizuje się także strona "karuzeli sowy". Na stronie karuzeli sowy znajdują się 4 przedmioty. " Obecnie, tak jak ja to mam, jeśli ".owl-item" przechodzi przez poprzednią piątą pozycję, strona z karuzelami sowy pozostaje na pierwszej.

Z góry dziękujemy za wszelkie spostrzeżenia!

Answer 1

Nie jestem pewien, ale myślę, że problemem jest sposób jesteś ustalania indexNum ..

musiałem reconfig jak znaleźć bieżący indeks, ale to może działać.

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