Question

当鼠标悬停在 .product-slider li.product 上时，图像滑块开始自动转帐，鼠标离开然后自动播放停止。滑块产品滑块和产品图片滑块两种效果都很好但效果很好。

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

我们使用的是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>`

Slider js code bellow

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

使用嵌套的owl轮播触发多次无法正常工作

1 个答案: