单击下一个上一个的猫头鹰滑块会触发所有其他滑块滑动

Question

我在页面中使用猫头鹰滑块。 我总共有4个猫头鹰滑块，该滑块动态显示在页面上。 问题是，如果我接下来单击特定的滑块，那么它也会同时滑动其他3个滑块块。 下面是我的完整代码。 为了理解目的，我只保留了2个滑块。

<div class="category-block-inner">
        <div class="box">boxes</div>
        <div class="box">boxes</div>
        <div class="box">boxes</div>
        <div class="box">boxes</div>

        <div class="owl-navigation">
            <div class="previous arrows" id="previous">
                <i class="fa fa-angle-left"></i>
            </div>
            <div class="next arrows" id="twonxt1">
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
    </div>
</div>


<div class="category-block-inner">
        <div class="box">boxes</div>
        <div class="box">boxes</div>
        <div class="box">boxes</div>
        <div class="box">boxes</div>

        <div class="owl-navigation">
            <div class="previous arrows" id="previous">
                <i class="fa fa-angle-left"></i>
            </div>
            <div class="next arrows" id="twonxt1">
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
    </div>
</div>  


<script>
    $(document).ready(function () {
            var category1 = $(".category-block-inner");
            category1.owlCarousel({
                pagination: false,
                items: 2,
                itemsDesktop: [1199, 2],
                itemsDesktopSmall: [1024, 2],
                itemsTablet: [768, 1],
                itemsMobile: [479, 1],
            });

            $(".next").click(function () {
                $(category1).trigger('owl.next');
            });

            $(".previous").click(function () {
                $(category1).trigger('owl.prev');
            });
        });
</script>

Answer 1

猫头鹰轮播允许您通过一个简单的选项来自定义“下一个”按钮：

 navText: ["yourPrevButton","yourNextButton"]

还允许使用html，因此您可以做任何您想做的事情。 查看所有选项： https : //owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

对于您的问题，您不仅需要执行多个owl-carousel实例，而且一个解决方案是创建一个owl-carousel等距循环（请注意 ：此解决方案仅在所有carousel具有相同选项的情况下才有效。

结合这两点，您将获得如下解决方案：

 $(".category-block-inner").each(function(){ $(this).owlCarousel({ dots:false, // your pagination? items: 2, nav:true, navText: ["MyPrevButton","MyNextButton"], itemsDesktop: [1199, 2], itemsDesktopSmall: [1024, 2], itemsTablet: [768, 1], itemsMobile: [479, 1], }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/> <div class="category-block-inner owl-carousel owl-theme"> <div class="item">boxes</div> <div class="item">boxes</div> <div class="item">boxes</div> <div class="item">boxes</div> </div> <div class="category-block-inner owl-carousel owl-theme"> <div class="item">boxes</div> <div class="item">boxes</div> <div class="item">boxes</div> <div class="item">boxes</div> </div>