我看到了很多关于在Bootstrap选项卡窗格中放置Owl转盘控件的问题。例如，Owl旋转木马在Bootstrap选项卡内不工作，并且Owl移动木马在选项卡面板内损坏。
我想实现相反的功能：将引导选项卡窗格放置在Owl转盘中的幻灯片(div(中。不幸的是，它不起作用：点击按钮组不会切换选项卡。如果我把幻灯片放在旋转木马外面，它就会开始工作。我发现了问题所在。Owl Carousel创建了幻灯片(owl-item cloned(的副本，使幻灯片看起来像环形的。因此，存在具有相同id和name的多个按钮组。它们相互冲突，因此切换选项卡不起作用。
有没有办法以某种方式解决这个问题？或者猫头鹰旋转木马只支持简单、可克隆的幻灯片类型？
如果我将loop设置为false，这会有所帮助，但我希望幻灯片保持循环。
$('.owl-carousel').owlCarousel({
items: 1,
loop: false, // <--------
nav: true,
});
试试这个
<!DOCTYPE html>
<html>
<head>
<title>OwlCarousel Slider</title>
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css">
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="owl-example" class="owl-carousel">
<div> Your Content Tab 1</div>
<div> Your Content Tab 1 </div>
<div> Your Content Tab 1</div>
<div> Your Content Tab 1 </div>
<div> Your Content Tab 1</div>
<div> Your Content Tab 1</div>
<div> Your Content Tab 1</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="owl-example" class="owl-carousel">
<div> Your Content Tab 2</div>
<div> Your Content Tab 2</div>
<div> Your Content Tab 2</div>
<div> Your Content Tab 2</div>
<div> Your Content Tab 2Tab 2Tab 2</div>
<div> Your Content Tab 2Tab 2</div>
<div> Your Content Tab 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
speed: 800,
margin:15,
autoplay:true,
nav:false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:3
}
}
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
$(".owl-carousel").trigger('refresh.owl.carousel');
});
});
</script>
</body>
</html>