SolvedOwlCarousel2 How to slider autoplay start and stop on mousehover and mouseleave?

List of products with slider are available on same slider class, but when i mouse hove in any one li product, then effect only on mouse hover li play and stop slider.

Only mouse hover li slider play and stop.

Html Code

<ul class="product-lists">
    <li class="product">
        <ul class="product-slider owl-carousel">
            <li>slide 1</li>
            <li>slide 1</li>
        </ul>
    </li>
    <li class="product">
        <ul class="product-slider owl-carousel">
            <li>slide 1</li>
            <li>slide 1</li>
        </ul>
    </li>
    <li class="product">
        <ul class="product-slider owl-carousel">
            <li>slide 1</li>
            <li>slide 1</li>
        </ul>
    </li>
    .
    .
    .   
</ul>

Slider js code bellow:

var owl = $(".product-slider");                 
owl.owlCarousel({
    loop:true,
    smartSpeed:450,
    responsiveClass: true,
    responsiveRefreshRate : 10,
    items:1,                        
});

$('.product-lists li.product').on('mouseover',function(e){
    owl.trigger('play.owl.autoplay');
})
$('.product-lists li.product').on('mouseleave',function(e){
    owl.trigger('stop.owl.autoplay');
})

I have use above code but it not working.
Please help me how do it?

30 Answers

✔️Accepted Answer

My solution 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),

Other Answers:

owl.owlCarousel({
loop:true,
smartSpeed:450,
responsiveClass: true,
autoplayHoverPause: true, // Stops autoplay
responsiveRefreshRate : 10,
items:1,
});

autoplayHoverPause
Type: Boolean
Default: false

Pause on mouse hover.

http://www.owlcarousel.owlgraphic.com/docs/api-options.html

I had the same problem - carousel didn't start after user :hover event. So I read comments above where a lot of ways how to fix it, but ** I would suggest do not change any vendor code** because it may lead to another issues in future when you make update.

According for this demo we need refactor code like below:

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

Thanks to @josetamayo

Refer to Owl document :

$('.owl-carousel').mouseover(function(){
      owl_product.trigger('stop.owl.autoplay');
  })

  $('.owl-carousel').mouseleave(function(){
      owl_product.trigger('play.owl.autoplay',[1000]);
  })