Owl carousel doesn't resume on mouse hoverout

Question

Owl carousel doesn't resume on mouse hover out. when I load the page it auto-plays. when I hover mouse on it will stop but doesn't resume on mouse hover out.

<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

Solution suggested by a user[1] on git repo for reported issue was add the stop() method to owl.carousel.js for Owl Carousel v2.2.0

At about line 2562 Look for this part:

'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),

Another user[2] also suggest do not change any vendor code, because it may lead to another issues in future when you make update.

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]);
})

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