Owl Carousel - Navigation Buttons move all sliders in the page-CodePudding

I have multiple Owl Carouse sliders in a page. The problem is that when I use the control button from one slider it moves all the sliders in the page.

I initialize the sliders based on a unique id using this function

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 ></i>',
            '<i ></i>'
        ],
    });
  
}

the html markup looks like this (page is in 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>';

Beside the "one button controls all" issue all the sliders works as they should.

CodePudding user response：

So problem in the hashListener function in the OwlCarousel plugin. When you create your html and you don't need hash navigation - dont put attributes data-hash="..." to your html markup for carousel items.