在事件+引導選項卡上更新貓頭鷹傳送帶'頁面'

Question

我試圖同時使用Owl Carousel和引導程序來創建具有用於選項卡導航的連續傳送帶的選項卡。我也希望這些標籤自動循環。

這裏是一個視覺參考：

這裏是一個小提琴：

https://jsfiddle.net/j28md74n/

，我使用（我註釋掉領域的主要JS我被卡住了）：

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

但是，當'.active''.owl-item'是第5項或以上時（即，我能夠完成大部分我想要的操作）。在另一個貓頭鷹傳送帶'頁面'）上，貓頭鷹傳送帶'網頁'也被更新。每個貓頭鷹輪播'頁面有4個項目。'目前，就我所知，如果'.owl-item'循環通過第五項，則貓頭鷹傳送帶頁面將保持在第一個頁面上。

在此先感謝您的任何見解！

Answer 1

不知道，但我認爲這個問題是你判斷indexNum的方式..

我不得不重新配置如何找到當前索引，但是這可能是工作。

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