猫头鹰轮播不适用于引导选项卡导航
Posted
技术标签:
【中文标题】猫头鹰轮播不适用于引导选项卡导航【英文标题】:Owl carousel is not working on bootstrap tabs nav 【发布时间】:2018-11-03 10:00:24 【问题描述】:我是 jquery 的新手。
我想使用owl carousel
滑动导航项。但它不起作用。
这是我的代码:
HTML
<div class="container">
<div class="nav nav nav-pills bottom owl-carousel" id="owler" role="tablist">
<div role="tab" class="tab-red active item expert-item">
<a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
red
</a>
</div>
<div role="tab" class="tab-orange item expert-item">
<a href="#orange-tab" aria-controls="home" role="tab" data-toggle="tab">
orange
</a>
</div>
</div>
</div>
JS
$("#owler").owlCarousel(
responsiveClass:true,
center: true,
loop:true,
autoplay:false,
nav: false,
navText: [
'<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>',
'<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>'
]
);
Live links
提前致谢。
【问题讨论】:
【参考方案1】:添加更多导航项,它将起作用。
【讨论】:
较早答案的简明孪生兄弟:***.com/questions/50504866/….【参考方案2】:实际上它可以工作,但您只需要在导航链接中添加更多选项卡。 参考this example。
HTML:
<div class="nav nav-tabs user-tabs bottom owl-carousel" id="owler" role="tablist">
<div role="presentation" class="tab-red active item expert-item">
<a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
name
</a>
</div>
<div role="presentation" class="tab-red active item expert-item">
<a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
name
</a>
</div>
<div role="presentation" class="tab-red active item expert-item">
<a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
name
</a>
</div>
<div role="presentation" class="tab-red active item expert-item">
<a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
name
</a>
</div>
<div role="presentation" class="tab-red active item expert-item">
<a href="#red-tab" aria-controls="home" role="tab" data-toggle="tab">
name
</a>
</div>
<div role="presentation" class="tab-orange item expert-item">
<a href="#orange-tab" aria-controls="home" role="tab" data-toggle="tab">
roll
</a>
</div>
<div role="presentation" class="tab-green item expert-item">
<a href="#green-tab" aria-controls="home" role="tab" data-toggle="tab">
subject
</a>
</div>
<div role="presentation" class="tab-yellow item expert-item">
<a href="#yellow-tab" aria-controls="home" role="tab" data-toggle="tab">
and what
</a>
</div>
</div>
如果您没有额外的导航项,您可能还希望缩小必须填充剩余空间的选项卡(例如,在 flexbox 容器内的元素上使用 flex 属性)。
【讨论】:
您是否看到在 Bootstrap 4 上它不起作用。 [codepen.io/sifulislam/pen/QrRxVb] (codepen.io/sifulislam/pen/QrRxVb) @SifulIslam,要么我们对“有效”这个词有不同的理解,要么它真的有效。通过写“它有效”,我的意思是可以左右拖动猫头鹰轮播项目。请您再检查一次好吗?以上是关于猫头鹰轮播不适用于引导选项卡导航的主要内容,如果未能解决你的问题,请参考以下文章