如何使用 mouseenter 自动播放 Owl carousel 2 滑块？

Question

我希望我的猫头鹰轮播在鼠标进入该 HTML 部分时开始滚动。我正在使用下面的代码。我尝试使用以下代码，但这似乎无法正常工作。它仅适用于第一个滑块，然后每次我必须让鼠标离开并进入以滑动项目时。请参考下面我的代码sn-p：

var owl=$('#service-slider');
owl.owlCarousel( {
    loop:true, autoplayTimeout:100, autoplayHoverPause:false, margin:0, nav:true, items:3, rewind:false, dots:false, navText:['<span><img src="images/slider-arrow.png" alt="slider arrow"></span>', '<span><img src="images/slider-arrow.png" alt="slider arrow"></span>'], responsive: {
        0: {
            items: 1, nav: true, dots: false, autoHeight: true,
        }
        , 600: {
            items: 2, autoHeight: true,
        }
        , 768: {
            items: 2
        }
        , 1025: {
            items: 3
        }
    }
}

);
$('.service-slider').on('mouseenter', function() {
    owl.trigger('play.owl.autoplay', [100]);
}

);
$('.service-slider').on('mouseleave', function() {
    owl.trigger('stop.owl.autoplay');
}

任何帮助将不胜感激......

Answer 1

我查看了您的代码。我不知道您为什么调用 .service-slider 检查该类是否存在。 默认情况下 owl carousel 使用 .owl-stage 你可以使用这个类。

$('.owl-stage').on('mouseenter', function() { owl.trigger('play.owl.autoplay', [100]); }); $('.owl-stage').on('mouseleave', function( ) { owl.trigger('stop.owl.autoplay'); });