如何解决使用 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({}) 后需要隐藏它们