Cập nhật Owl Carousel 'Trang' trên Event + Bootstrap Tabs

Question

Tôi đang cố gắng sử dụng cả Owl Carousel và Bootstrap để tạo các tab có băng chuyền liên tục cho điều hướng tab. Tôi cũng muốn các tab này tự động xoay vòng.

Đây là một tài liệu tham khảo hình ảnh:

Và đây là một fiddle:

https://jsfiddle.net/j28md74n/

Các JS chính mà tôi đang sử dụng (tôi đã nhận xét ra các lĩnh vực nơi tôi bị kẹt):

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

Tôi có thể hoàn thành hầu hết những gì tôi muốn, tuy nhiên, khi '.active' '.owl-item' là hạng mục thứ 5 trở lên (tức là trên một băng chuyền con cú khác 'trang') mà các băng chuyền con cú 'trang' cập nhật là tốt. Có 4 mục cho mỗi trang băng chuyền. Hiện tại, theo cách của tôi, nếu chu kỳ '.owl-item' vượt qua mục thứ 5, trang băng chuyền con cú nằm trên trang đầu tiên.

Cảm ơn trước vì bất kỳ thông tin chi tiết nào!

Answer 1

Không chắc, nhưng tôi nghĩ rằng vấn đề là cách bạn đang xác định indexNum ..

tôi phải reconfig làm thế nào để tìm thấy chỉ số hiện tại, nhưng điều này có thể làm việc.

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