在Event + Bootstrap选项卡上更新Owl Carousel'Page'

Question

我正在尝试使用Owl Carousel和Bootstrap来创建标签,这些标签具有用于标签导航的连续轮播.我还希望这些选项卡自动循环.

这是一个视觉参考:

这是一个小提琴:

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'循环经过第5项,猫头鹰轮播页面将保留在第一项.

提前感谢任何见解!

Answer 1

不确定，但我认为问题在于你确定indexNum的方式..

我必须重新配置如何查找当前索引，但这可以工作。

工作示例。

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