Owlcarousel2: Can't stop carousel in autoplay mode after 'to.owl.carousel' trigger

Created on 11 Jun 2014  路  21Comments  路  Source: OwlCarousel2/OwlCarousel2

Hello,
I've this 2 rows in my code:
owl.trigger('stop.owl.autoplay');
owl.trigger('to.owl.carousel',[index],[0]);

but the carousel doesn't stop. If I remove the first row the stop works.

Can you help me?

Best Regards
Stefano

bug

Most helpful comment

I've taken a look at the code and it seems you're just missing one line of code. The autoplay handlers has this for the stop event:

...
'stop.owl.autoplay': $.proxy(function() {
    this.stop();
}, this),
...

Looking at the stop() function, it is only set to this:

Autoplay.prototype.stop = function() {
    window.clearInterval(this.interval);
};

This only clears the interval but doesn't stop the autoplay. Adding in a line to set the option fixes this:

Autoplay.prototype.stop = function() {
    window.clearInterval(this.interval);
    this.core.settings.autoplay = false;
};

Note this may need a similar fix if you want to start autoplay as well but I haven't tested that. Hope this helps with the fix and helps anyone who needs this functionality.

All 21 comments

@sferrara Could you provide a link to an example?

I'll just jump in here. I couldn't get the event above, or autoplay.stop.owl to work. Added to codepen. http://codepen.io/nford/pen/Jefcr

@nford Thanks!

@witrin Demo provided by you above doesn't seem to be working. Can you update?

Have anyone found out a solution for this, can't make autoplay stop either.

I tried this. Should work according to the Owl 2.0 docs. It never stops on hover, or autoplay.stop.owl
Any updates on bug fixes, or work arounds? Thanks

$('.owl-carousel').owlCarousel({
loop:true,
nav:true,
items:1,
margin:0,
autoplay:true,
autoplayHoverPause:true,
});

$('.owl-item, .owl-prev, .owl-next, .owl-dot span').on('click',function(){
$('.owl-carousel').trigger('autoplay.stop.owl')
})

Now that OwlCarousel changed hand, maybe we will see a fix soon. Let's hope.

Is there any more news on this? I've come across this issue now and would love for it to stop on request. Has any progress been made?

I've taken a look at the code and it seems you're just missing one line of code. The autoplay handlers has this for the stop event:

...
'stop.owl.autoplay': $.proxy(function() {
    this.stop();
}, this),
...

Looking at the stop() function, it is only set to this:

Autoplay.prototype.stop = function() {
    window.clearInterval(this.interval);
};

This only clears the interval but doesn't stop the autoplay. Adding in a line to set the option fixes this:

Autoplay.prototype.stop = function() {
    window.clearInterval(this.interval);
    this.core.settings.autoplay = false;
};

Note this may need a similar fix if you want to start autoplay as well but I haven't tested that. Hope this helps with the fix and helps anyone who needs this functionality.

Thanks to @TcPhilBushnell. It works for me!

Confirm @TcPhilBushnell works also for me.

@TcPhilBushnell your trick works for me, but I also had to use 'stop.autoplay.owl' instead of 'stop.owl.autoplay'.

The code will look for stop.owl.autoplay so that is the event to use - the documentation is/was incorrect (saying stop.autoplay.owl) but you could make the code match the [old] documentation if you desired.

Generally it's ill advised to edit vendor code unless there's no way of fixing an issue with additional code.

Looked for problem and found that owl.trigger('stop.owl.autoplay'); works, but have to be triggered few times (because I'm not sure when this event will be accepted). I've created simple interval, that triggers owl.trigger('stop.owl.autoplay'); every 100ms, and clears itself after few seconds. Working fine!

Thanks @TcPhilBushnell! That fix was huge! Thanks again

Looks like on the stop() function is checking to see if the animation is in progress. If it is then it doesn't clear the timeout.

Autoplay.prototype.stop = function() {
        if (!this._core.is('rotating')) {
            return;
        }
        window.clearTimeout(this._timeout);
        this._core.leave('rotating');
    };

For my purposes I just commented out the if statement and it did the trick. Not sure what other implications that might have on more complex uses of the plugin.

Holy crap @TcPhilBushnell, you just stopped me from throwing my entire desk out my window! Thank you so much for that fix!

Thanks a lot! @TcPhilBushnell it's cool to be you)

thanks @TcPhilBushnell .

For start/play autoplay again after stop, I have changed this code

'play.owl.autoplay': $.proxy(function(e, t, s) {
this.play(t, s);
}, this),
to

'play.owl.autoplay': $.proxy(function(e, t, s) {
this.core.settings.autoplay = true;
this.autoplay();
this.play(t, s);
}, this),

this is working for me . hope this will help anyone need this play again funtionality

This fix for autoplay problems.

` Autoplay.prototype.stop = function() {
if (!this._core.is('rotating')) {
return;
}

    window.clearTimeout(this._timeout);
    this._core.settings.autoplay = false; //Add this line.      
    this._core.leave('rotating');
};`
Was this page helpful?
0 / 5 - 0 ratings

Related issues

edelworksgithub picture edelworksgithub  路  4Comments

shamimsaj picture shamimsaj  路  3Comments

hopea114y picture hopea114y  路  3Comments

ghost picture ghost  路  3Comments

Uranbold picture Uranbold  路  3Comments