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.
Entonces, problema en la función hashListener en el complemento OwlCarousel. Cuando crea su html y no necesita navegación hash, no coloque atributos data-hash="..." en su marcado html para elementos de carrusel.