CODEWITHSUNDEEP
javascriptjqueryhovercarouselowl-carousel
Ujan
Ujan

Reputation: 25

Owl carousel doesn't resume on mouse hoverout

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>

Upvotes: 1

Views: 3266

Answers (2)

SUAT SUPHI
SUAT SUPHI

Reputation: 527

$(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);
        }
    });
});

Upvotes: 1

Vishnu Pradeep
Vishnu Pradeep

Reputation: 2097

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

Upvotes: 5

Related Questions