Question

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

这是一个视觉参考：

这是一个小提琴：

我正在使用的主要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项或更高（即在另一个猫头鹰旋转木马'页面'）时，猫头鹰旋转木马'page'也会更新。每个猫头鹰旋转木马页面有4个项目。目前，按照我的方式，如果'.owl-item'循环经过第5项，猫头鹰轮播页面将保留在第一项。

提前感谢任何见解！

Answer 1

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

我必须重新配置如何查找当前索引，但这可能有效。

working example

$resultSet = Array();
if($AdminRecord){
    foreach($AdminRecord->result() as $result) {
       $resultSet[] = $result;
    }
}
echo json_encode($resultSet);

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

1 个答案: