如何解决使用owl-carousel同时显示多个滑块的问题

Question

我试图通过单击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;
}

这是用于切换选项卡菜单和运行猫头鹰转盘的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,
autoplayTimeout:3000,
autoplayHoverPause:true,
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
$('.my-3 > .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
}
}
});

问题是。。。当我第一次打开页面时，即使我隐藏在jQuery 中，这3个选项卡菜单也会同时出现

但当我点击其中一个李切换幻灯片时，它就消失了。我一开始只想看一张幻灯片。

我该怎么解决这个问题？

Answer 1

调用$(…(.ollCarousel(｛｝(后需要隐藏它们