Tengo varios controles deslizantes Owl Carouse en una página. El problema es que cuando uso el botón de control de un control deslizante, mueve todos los controles deslizantes de la página.

Inicializo los controles deslizantes en función de una identificación única usando esta función

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

el marcado html se ve así (la página está en 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>';

Además del problema de "un botón controla todo", todos los controles deslizantes funcionan como deberían.