Owlcarousel2: How to slider autoplay start and stop on mousehover and mouseleave?

[presslayouts]

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?

[NPanayotov]

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

[presslayouts]

Thank you for reply,

By default autoplay is stop but when i mouse hover on li then autoplay star and when mouse on leave li then autopay is stop.

When autoplayHoverPause is working only stop autoplay slider.

Please you can help in my requirement.

[NPanayotov]

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

$('.product-slider li').on('mouseenter',function(e){
$(this).closest('.owl-carousel').trigger('play.owl.autoplay');
})

$('.product-slider li').on('mouseleave',function(e){
$(this).closest('.owl-carousel').trigger('stop.owl.autoplay');
})

[presslayouts]

Thank you,

But it not working and i have already added class owl-carousel in html structure.

We will use owl carousel js version is Owl Carousel v2.1.6.

what's a problem? or I will some misunderstanding.

We have use bellow code and it working autopay slider, but only first slider slide is pay not second slide pay and after stop. not working continue end slide autopay.

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

Please any help me?

[NPanayotov]

Try using older version of the plugin. It seems that since the new owner started changing things some of the functions got broken.

[presslayouts]

Thank you for your good and fast reply,

Please you can tell me which older version use, then your code works fine

Thank.
On 14-Jul-2016 8:31 pm, "NPanayotov" [email protected] wrote:

Try using older version of the plugin. It seems that since the new owner
started changing things some of the functions got broken.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/1471#issuecomment-232691416,
or mute the thread
https://github.com/notifications/unsubscribe/ATV-mNjtChmkDafKK7R-4nn4NvBEzUKfks5qVk8rgaJpZM4JEYNW
.

[NPanayotov]

2.0.0

Поздрави,
Николай Панайотов

On 14.07.2016 г., at 18:07, presslayouts [email protected] wrote:

Thank you for your good and fast reply,

Please you can tell me which older version use, then your code works fine

Thank.
On 14-Jul-2016 8:31 pm, "NPanayotov" [email protected] wrote:

Try using older version of the plugin. It seems that since the new owner
started changing things some of the functions got broken.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/1471#issuecomment-232691416,
or mute the thread
https://github.com/notifications/unsubscribe/ATV-mNjtChmkDafKK7R-4nn4NvBEzUKfks5qVk8rgaJpZM4JEYNW
.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[presslayouts]

I have tried in version 2.0.0 but it not working.

I have attached bellow my example .zip file, please you can check and
resolve issue and after send me this example.

thank in advance.

On Thu, Jul 14, 2016 at 9:33 PM, NPanayotov [email protected]
wrote:

2.0.0

Поздрави,
Николай Панайотов

On 14.07.2016 г., at 18:07, presslayouts [email protected]
wrote:

Thank you for your good and fast reply,

Please you can tell me which older version use, then your code works fine

Thank.
On 14-Jul-2016 8:31 pm, "NPanayotov" [email protected] wrote:

Try using older version of the plugin. It seems that since the new
owner
started changing things some of the functions got broken.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<
https://github.com/OwlCarousel2/OwlCarousel2/issues/1471#issuecomment-232691416
,
or mute the thread
<
https://github.com/notifications/unsubscribe/ATV-mNjtChmkDafKK7R-4nn4NvBEzUKfks5qVk8rgaJpZM4JEYNW

.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub, or mute the thread.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/1471#issuecomment-232710856,
or mute the thread
https://github.com/notifications/unsubscribe/ATV-mHzFYE4Y9cJ-umHpo_rRx7ErWv3Sks5qVl3QgaJpZM4JEYNW
.

Best Regards,

_PressLayouts._
_CEO & Co-founder | PressLayouts_
www.presslayouts.com

Skype: presslayouts | Twitter: @presslayouts

[Vilz]

my workaround

$('.main-technologies-list-item').each(function(){
        var mainPromoCarousel = $(this).find('.main-technologies-list-item-carousel');
        var interval;
        mainPromoCarousel.owlCarousel({
            items: 1,
            nav: false,
            navText: ['', ''],
            slideBy: 1,
            dots: true,
            loop:true
        });
        $(this).hover(
            function(){
                interval = setInterval(function() {
                    mainPromoCarousel.trigger('next.owl.carousel');
                }, 1500);
            },
            function(){
                clearInterval(interval);
            }
        );
    });

[bardachev]

Confirm that starting autoplay after mouse leave is buggy. It sometimes starts, sometimes don't. When I then swipe to a next slide by hand - autoplay starts again.
I have 1 item on a page.

[presslayouts]

Hi Vilz,

Than you for your reply and it working fine but one issue is remaining.

I have use nested carousal, it means carousal inside carousal, And will use above code in parent inside one slide inside child carousal. When i mouse hover on any one parent slide then move both slider parent and child.

See bellow html code:

<ul class="product-lists parent-slider">
    <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>

Please you can help me, only move child slider not parent slider move.

Thank you in advance !!!

[Vilz]

presslayouts, Hi!

Check that the variables used in each, do not coincide with the variables of parental carousel.

Something like this

$('.product-slider.owl-carousel').each(function(){
        var mainPromoCarousel = $(this);
        var interval;
        mainPromoCarousel.owlCarousel({
            items: 1,
            nav: false,
            navText: ['', ''],
            slideBy: 1,
            dots: true,
            loop:true
        });
        function nextPress(obj) {
            obj.trigger('next.owl.carousel');
        };
        $(this).hover(
            function(){
                nextPress(mainTechnologiesCarousel);
                interval = setInterval(function() {
                    nextPress(mainTechnologiesCarousel);
                }, 1500);
            },
            function(){
                clearInterval(interval);
            }
        );
    });

• start fix autoplay on hover straight

I would need to implement a similar behavior after a while, so I'll check in my project and write, if need be

[presslayouts]

Hi Vilz,

Thank you for help and reply.

mainTechnologiesCarousal is undefined variable.

How can use mainTechnologiesCarousal variable.

We are waiting for your reply.
On 22-Aug-2016 6:04 am, "Vilz" [email protected] wrote:

presslayouts, Hi!

Check that the variables used in each, do not coincide with the variables
of parental carousel.

Something like this

$('.product-slider.owl-carousel').each(function(){
var mainPromoCarousel = $(this);
var interval;
mainPromoCarousel.owlCarousel({
items: 1,
nav: false,
navText: ['', ''],
slideBy: 1,
dots: true,
loop:true
});
function nextPress(obj) {
obj.trigger('next.owl.carousel');
};
$(this).hover(
function(){
nextPress(mainTechnologiesCarousel);
interval = setInterval(function() {
nextPress(mainTechnologiesCarousel);
}, 1500);
},
function(){
clearInterval(interval);
}
);
});

I would need to implement a similar behavior after a while, so I'll check
in my project and write, if need be

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/1471#issuecomment-241292558,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATV-mIbdLpdaXKt_jAy8dlvn5a_fU-JYks5qiO53gaJpZM4JEYNW
.

[josetamayo]

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

[damirkoch]

(Sorry about the canned reply.)

We have received your feature request and will evaluate the implementation of this.

I can't give you an estimated date when or if this will be integrated into the project. This might happen when the main refactoring will take place.

[Galch24]

I have the same bug.
Autoplay works fine after initializing owl.carousel. On mouse hover it stops as expected. But on mouseleave carousel does not start spinning.

Fix from _josetamayo_ works for me. Thanks!

[najandhamed]

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

```

[andrea-86]

Fix from josetamayo works also for me. Thanks!

The part of plugin that makes me perplexed is the following:

````
//handler for mouseleave
'mouseleave.owl.autoplay': $.proxy(function() {
console.log('mouseleave.owl.autoplay');
if (this._core.settings.autoplayHoverPause && this._core.is('rotating')) {
this.stop(); // Quick fix for resume play on mouseleave
this.play();
}
}, this),
/**
* Starts the autoplay.
* @public
* @param {Number} [timeout] - The interval before the next animation starts.
* @param {Number} [speed] - The animation speed for the animations.
*/
Autoplay.prototype.play = function(timeout, speed) {
this._paused = false;

    if (this._core.is('rotating')) {
        return;
    }

    this._core.enter('rotating');

    this._setAutoPlayInterval();
};

/**
* Stops the autoplay.
* @public
*/
Autoplay.prototype.stop = function() {
if (!this._core.is('rotating')) {
return;
}

    window.clearTimeout(this._timeout);
    this._core.leave('rotating');
};

````

the event handler call the play method only if this._core.is('rotating') and then inside the play method the same value of that property is responsible for the return call and the autoplay dosn't start. I think there's something wrong in all this.

[andrea-86]

Another possible solution(that wors for me but i didn't like it) is to trigger the 'next.owl.carousel' event on mouseleave. This reactivate the autoplay if it was set to true when inizialize the carousel.

owlCarousel.trigger('next.owl.carousel');

[Hlsgs]

It seems strange to me that such basic functionality is broken. I'm using the same solution as @Graphap to fix this. Also leaving autoplayHoverPause true, beacause it keeps the carousel stopped after a click on next/prev, while said solution would require leaving and entering the slider again to work.
I'd like to skip this overhead though...

[efoula]

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

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

[oleksandrbazil]

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

[daviddeutsch]

See #1942

[Blogg-code]

I have succeeded with version v1.3.3
Add to command only condition :1st_place_medal:
stopOnHover:true, //mouse hover Stop
See https://github.com/Blogg-code/OwlCarousel

[Jossnaz]

@Graphap probably want to fix the variables in your snippet eg.

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

            owlCarousel.mouseleave(function(){
              owlCarousel.trigger('play.owl.autoplay',[1000]);
            });

[Deepakwayindia]

Take this code and implement

$(document).ready(function() {
$("#home-slider").owlCarousel({
navigation : true,
navRewind: false,
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
autoplay: true,
items : 1,
nav: true,
dots: false,
autoplayHoverPause:true
});
});

[Bablu31]

$('#demos').on('mouseover',function(e){
        owl.trigger('play.owl.autoplay');
        })
        $('#demos').on('mouseleave',function(e){
        owl.trigger('stop.owl.autoplay');

})

its work really . use by me

[suatsuphi]

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