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上建议的解决方案是将ow（）方法添加到owl.carousel.js for 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);
        }
    });
});

猫头鹰旋转木马不会在鼠标悬停时恢复

2 个答案: