Owl 滑块点击下一个上一个触发所有其他滑块滑动

Question

我在我的页面中使用 owl 滑块。我总共有 4 个 owl 滑块动态出现在页面上。问题是，如果我接下来单击特定滑块，它也会滑动其他 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

Owl-carousel 允许您使用一个简单的选项自定义 "next- prev" 按钮：

 navText: ["yourPrevButton","yourNextButton"]

也允许html，所以你可以做任何你想做的事。查看所有选项：https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

对于你的问题，你必须做多个 owl-carousel 实例，而不仅仅是 1 个。一个解决方案可能是创建一个 owl-carousel istances 的循环（注意：此解决方案仅在所有轮播都具有相同选项时才有效。

加入这 2 点你有这样的解决方案：

$(".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>

Owl 滑块点击下一个上一个触发所有其他滑块滑动

Owl Slider clicking on next previous triggers all other slider to slide

javascript

jquery

owl-carousel