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

Posted 2023-05-09

【中文标题】如何使用 mouseenter 自动播放 Owl carousel 2 滑块？

【英文标题】：How to auto play Owl carousel 2 slider with mouseenter?

【发布时间】：2018-09-04 11:03:27

【问题描述】：

我希望我的猫头鹰轮播在鼠标进入该 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" ></span>', '<span><img src="images/slider-arrow.png" ></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');

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

【参考方案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'); );

【讨论】：

感谢 Rajiv 指出这一点。我的目的是通过获取该类的参考来进行一些自定义，因为我在一个页面上多次使用 Owl carousel。即使使用修改后的代码，我也无法达到预期的效果。

很抱歉 Piyush，但我也使用了一些对我有用的样本，很快就会分享样本。

感谢 Rajiv 快速转身。