如何解决如何解决使用 owl-carousel 一次显示多个滑块的问题
我试图通过单击 ul 中的 li 将 owl carousel 用于在每个选项卡菜单中工作的多张幻灯片。
这是我的 HTML
<ul class="artwork">
<li class="on">Pattern</li>
<li>Colours</li>
<li>Characters</li>
<li>Photography</li>
<li>Drwaings</li>
<li>Illustrations</li>
<li>Nature</li>
</ul>
<div class="tab_cont">
<div class="my-1">
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
</div>
</div>
<div class="my-2">
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
</div>
</div>
<div class="my-3">
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
</div>
</div>
</div>
和这里的css
.artwork {
border: 1px solid red;
padding-bottom: 100px;
}
.artwork li {
font-family: 'Montserrat-Semibold';
list-style: none;
float: left;
cursor: pointer;
text-align: center;
font-size: .8rem;
}
.artwork li:nth-child(n+2) {
margin-left: 40px;
}
.artwork li.on {
color: #AE1824;
font-weight: bold;
}
.tab_cont {
clear: both;
border: 1px solid #dedede;
height: auto;
background-color: #cecece;
}
.my-1 {
max-width:1000px;
margin:0 auto;
}
.my-2 {
max-width:1000px;
margin:0 auto;
}
.my-3 {
max-width:1000px;
margin:0 auto;
}
.my-1 > .owl-carousel > .owl-stage-outer > .owl-stage > .owl-item > .item {
background-color:red;
margin:0 auto;
height: 320px;
}
.my-2 > .owl-carousel > .owl-stage-outer > .owl-stage > .owl-item > .item {
background-color:blue;
margin:0 auto;
height: 320px;
}
.my-3 > .owl-carousel > .owl-stage-outer > .owl-stage > .owl-item > .item {
background-color:black;
margin:0 auto;
height: 320px;
}
这里是用于切换标签菜单和运行 owl carousel 的 jquery
$(document).ready(function() {
$(".artwork li").click(function() {
var idx = $(this).index();
$(".artwork li").removeClass("on");
$(".artwork li").eq(idx).addClass("on");
$(".tab_cont > div").hide();
$(".tab_cont > div").eq(idx).show();
})
});
$('.my-1 > .owl-carousel').owlCarousel({
autoplay:true,autoplayTimeout:3000,autoplayHoverPause:true,loop:true,margin:10,nav:true,responsive:{
0:{
items:1
},600:{
items:3
},1000:{
items:5
}
}
});
$('.my-2 > .owl-carousel').owlCarousel({
autoplay:true,1000:{
items:5
}
}
});
$('.my-3 > .owl-carousel').owlCarousel({
autoplay:true,1000:{
items:5
}
}
});
问题是... 即使我隐藏在 jQuery 中,当我首先打开页面时,这 3 个选项卡菜单会立即出现
但是当我单击 li 之一切换幻灯片时它消失了。 一开始我只想看一张幻灯片。
我该如何解决这个问题?
解决方法
调用 $(...).owlCarousel({}) 后需要隐藏它们
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。