javascript - 使用嵌套的猫头鹰轮播，触发器无法在多个中正常工作

Question

当我将鼠标悬停在.product-slider li.product上时，图像滑块开始自动付款，鼠标离开然后自动播放停止。这工作正常，但在滑块product-slider和product image slider中都有效果。

当鼠标悬停在单个产品幻灯片中时，我们只需要在产品图像滑块中首先实现自动播放、自动播放停止和转到幻灯片。

我们使用的是 owl carousal 版本 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>`

滑块js代码如下

`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(); });
}