猫头鹰轮播不会在鼠标悬停时恢复

Question

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

<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>

Answer 1

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

大约在第 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

Answer 2

$(document).ready(function () {
    var owl = $('.owl-carousel');
    owl.on('mouseleave', function (e) {
        var data = $(e.currentTarget).data('owl.carousel');
        //console.log('autoplay:' + data.settings.autoplay + ' autoplayTimeout' + data.settings.autoplayTimeout);
        if (data.settings.autoplay) {
            $(e.currentTarget).trigger('stop.owl.autoplay');
            $(e.currentTarget).trigger('play.owl.autoplay', data.settings.autoplayTimeout);
            //console.log('It is working autoplay:' + data.settings.autoplay + ' autoplayTimeout' + data.settings.autoplayTimeout);
        }
    });
});