小编Rya*_*orn的帖子

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

我正在尝试使用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 …
Run Code Online (Sandbox Code Playgroud)

tabs pagination twitter-bootstrap-3 owl-carousel

9
推荐指数
1
解决办法
1772
查看次数