Owl 轮播 - 导航按钮移动页面中的所有滑块

Question

我在一个页面中有多个 Owl Carouse 滑块。问题是，当我使用一个滑块的控制按钮时，它会移动页面中的所有滑块。

我使用此函数根据唯一 ID 初始化滑块

function property_slider_v2(slider_id){   
    console.log('we do '+slider_id);
    jQuery('#'+slider_id).owlCarousel({
        loop:true,
        margin:0,
        nav:true,
        items:6,
        dots:false,
        mouseDrag:true,
        video:true,
        autoHeight: true,
        autoWidth:true,
        stagePadding:0,
       // rtl:true,
        navText : [
            '<i class="fas fa-arrow-left"></i>',
            '<i class="fas fa-arrow-right"></i>'
        ],
    });
  
}

html 标记如下所示（页面位于 php）

$slider_id='property_slider_carousel_elementor_v2_'.rand(1,99999);
.....
<div class="owl-carousel owl-theme " id="'.$slider_id.'" data-auto="">
......
</div>

print'<script type="text/javascript">
    //<![CDATA[
      jQuery(document).ready(function(){
        property_slider_v2("'.$slider_id.'");
      });
    //]]>
</script>';

除了“一键控制所有”问题之外，所有滑块都可以正常工作。

Answer 1

OwlCarousel 插件中的 hashListener 函数出现问题。当您创建 html 并且不需要哈希导航时 - 不要将属性 data-hash="..." 放入轮播项目的 html 标记中。

Owl 轮播 - 导航按钮移动页面中的所有滑块

Owl Carousel - Navigation Buttons move all sliders in the page

javascript

jquery

owl-carousel