我已经将猫头鹰旋转木马添加到引导垂直选项卡中，旋转木马不起作用。我在Stackoverflow上尝试了一些解决方案，但并不幸运。Carousel在选项卡外工作得很好，但在bootstrap选项卡内就不行。
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<?php $get_feedback = get_field('feedback');
if(get_feedback): ?>
<div id="main" class="owl-carousel owl-theme">
<?php foreach ($get_feedback as $item) : ?>
<div class="card-feedback">
<div class="card-body-feedback">
<div class="template-demo">
<p><?php echo $item['feedback-content'];?></p>
<h4 class="cust-name"><?php echo $item['name'];?></h4>
<p class="cust-profession">Client</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">Hey There</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">Hello Model Video</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">Book Now</div>
</div>
jQuery(document).ready(function(){
jQuery("#main").owlCarousel({
speed: 800,
margin:15,
autoplay:false,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:3
}
}
})
});
试试这个代码
<!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>
<!-- Nav tabs -->
<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 1</div>
<div> Your Content 2</div>
<div> Your Content 3</div>
<div> Your Content 4</div>
<div> Your Content 5</div>
<div> Your Content 6</div>
<div> Your Content 7</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="owl-example" class="owl-carousel">
<div> Your Content 2.1</div>
<div> Your Content 2.2</div>
<div> Your Content 2.3</div>
<div> Your Content 2.4</div>
<div> Your Content 2.5</div>
<div> Your Content 2.6</div>
<div> Your Content 2.7</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:false,
nav:true,
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>$(文档)时(函数(){$(".owl-carousel" .owlCarousel ({速度:800保证金:15日播放:假的,导航:没错,响应:{0: {项目:1}，600: {项目:3}，1000: {项目:3}}}(;$ (' [data-toggle ="tab")。("shown.bs。Tab '， function (e) {target//新激活的TAB. relatedtarget//上一个活动选项卡$(".owl-carousel" .trigger("refresh.owl.carousel");}(;});