[英]Owl carousel is not working on bootstrap tabs nav
我是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>'
]
});
提前致謝。
添加更多導航項,它將工作。
實際上它可以工作,但您只需要在導航鏈接中添加更多選項卡。 看一下這個例子以供參考。
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屬性)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.