我正在尝试使用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)