javascript - 鼠标悬停时猫头鹰轮播无法恢复

鼠标悬停时，猫头鹰传送带不会恢复。当我加载页面时，它会自动播放。当我将鼠标悬停在其上时，它将停止，但在鼠标悬停时不会恢复。

<script>
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        items:4,
        loop:true,
        margin:10,
        autoplay:true,
        autoplayTimeout:1000,
        autoplayHoverPause:true
    });
    $('.play').on('click',function(){
        owl.trigger('play.owl.autoplay',[1000])
    });
    $('.stop').on('click',function(){
        owl.trigger('stop.owl.autoplay')
    });
</script>

最佳答案

用户[1]在git repo上针对报告的问题建议的解决方案是，将Owl Carousel v2.2.0的stop（）方法添加到owl.carousel.js中

在大约2562行中查找以下部分：

'mouseleave.owl.autoplay': $.proxy(function() {
      if (this._core.settings.autoplayHoverPause && this._core.is('rotating')) {
            this.stop(); // Quick fix for resume play on mouseleave
            this.play();
      }
}, this),

另一个用户[2]也建议不要更改任何供应商代码，因为将来进行更新时可能会导致另一个问题。

var owl = $('.owl-carousel');
var owlCarouselTimeout = 1000;
owl.owlCarousel({
   items:4,
   loop:true,
   margin:10,
   autoplay:true,
   autoplayTimeout: owlCarouselTimeout,
   autoplayHoverPause:true
});
owl.on('mouseleave',function(){
   owl.trigger('stop.owl.autoplay'); //this is main line to fix it
   owl.trigger('play.owl.autoplay', [owlCarouselTimeout]);
})

参考：[1] https://github.com/OwlCarousel2/OwlCarousel2/issues/1471#issuecomment-277095022
[2] https://github.com/OwlCarousel2/OwlCarousel2/issues/1471#issuecomment-310347343