如何解决如何将 Bootstrap 5 Tabs 集成到 OwlCarousel2 Item 中?
我想知道如何集成和使用 Bootstrap 5 标签 OwlCarousel2 轮播项目。
我在谷歌做了一些研究,但没有找到我想要实现的正确答案
为了更多的解释,我做了一些例子:
OwlCarousel2 HTML 代码:
<section id="example-carousel">
<div class="owl-carousel owl-theme">
<div class="w-100 vh-100 d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-xl-10">
<div class="item">
<h1>What is Lorem Ipsum?</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Bootstrap 5 标签 HTML 代码:
<div>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-example1-tab" data-bs-toggle="tab" href="#nav-example1" role="tab" aria-controls="nav-example1" aria-selected="true">Example 1</a>
<a class="nav-link" id="nav-example2-tab" data-bs-toggle="tab" href="#nav-example2" role="tab" aria-controls="nav-others" aria-selected="false">Example 2</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-example1" role="tabpanel" aria-labelledby="nav-example1-tab">
<h3>Tab Pane Example 1</h3>
</div>
<div class="tab-pane fade" id="nav-example2" role="tabpanel" aria-labelledby="nav-example2-tab">
<h3>Tab Pane Example 2</h3>
</div>
</div>
</div>
OwlCarousel2 JS 代码:
jQuery(document).ready(function($) {
// OwlCarousel2
var owl = $('.owl-carousel');
owl.owlCarousel({
loop:true,margin:0,nav:false,responsive:{
0: {
items: 1
},600: {
items: 1
},800: {
items: 1
},1024: {
items: 1
},1200: {
items: 1
}
}
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。