Триггер не работает должным образом во множественном числе с вложенной каруселью совы

Question

Когда я наведите курсор мыши на .product-slider li.product, тогда слайдер изображения запускается автоматически и мышь, а затем останавливается автозапуск. Это работает нормально, но действует как в слайдере product-slider и product image slider.

Нам нужно произвести эффект автовоспроизведения, автовоспроизведение и перейти к слайду сначала в слайдер продукта-изображения при наведении мышки на один слайд продукта.

Мы использовать OWL пирушка версии 2.1.6

HTML код

`<ul class="product-lists product-slider owl-carousel"> 

    <li class="product"> 
     <ul class="product-image-slider owl-carousel"> 
      <li>image 1</li> 
      <li>image 1</li> 
     </ul> 
     content here.. 
    </li> 
    <li class="product"> 
     <ul class="product-image-slider owl-carousel"> 
      <li>image 1</li> 
      <li>image 1</li> 
     </ul> 
     content here.. 
    </li> 
    <li class="product"> 
     <ul class="product-image-slider owl-carousel"> 
      <li>image 1</li> 
      <li>image 1</li> 
     </ul> 
     content here.. 
    </li> 
    . 
    . 
    . 
</ul>` 

Slider код ниже расслоение плотной

`var owl1 = $(".product-slider"); 
owl1.owlCarousel({ 
    loop:true, 
    nav:true, 
    smartSpeed:450, 
    responsiveClass: true, 
    responsiveRefreshRate : 10, 
    items:3,       
}); 

var owl2 = $(".product-image-slider"); 
owl2.owlCarousel({ 
    loop:true, 
    dot:true, 
    smartSpeed:450, 
    responsiveClass: true, 
    responsiveRefreshRate : 10, 
    items:1,       
}); 

$('.product-lists li.product').on('mouseenter',function(e){ 
    owl2.trigger('to.owl.carousel', 0); 
    owl2.trigger('play.owl.autoplay'); 
}); 

$('.product-lists li.product').on('mouseleave',function(e){ 
    owl2.trigger('to.owl.carousel', 0); 
    owl2.trigger('stop.owl.autoplay'); 
});` 

Пожалуйста, помогите мне !!!

Спасибо заранее!

Answer 1

Это известная проблема в owl.carousel: https://github.com/OwlCarousel2/OwlCarousel2/issues/1478

Вы можете исправить это отключить распространения этих событий:

function stopOwlPropagation(element) { 
    jQuery(element).on('to.owl.carousel', function(e) { e.stopPropagation(); }); 
    jQuery(element).on('next.owl.carousel', function(e) { e.stopPropagation(); }); 
    jQuery(element).on('prev.owl.carousel', function(e) { e.stopPropagation(); }); 
    jQuery(element).on('destroy.owl.carousel', function(e) { e.stopPropagation(); }); 
} 
stopOwlPropagation('.owl-carousel');` 

Или в одной строке обработчика событий:

function stopOwlPropagation(element) { 
    jQuery(element).on('to.owl.carousel, next.owl.carousel, prev.owl.carousel, destroy.owl.carousel', function(e) { e.stopPropagation(); }); 
}