Owlcarousel2: autoplay stops working after tab switch

[unaor]

Im using version 2.2.0 and when switching tab, the images do no autoplay

here is my code

$('#clients').owlCarousel({ center: true, items:4, loop:true, autoplay: true, autoplayTimeout: 1000, margin:10 });

[Very-Bad-Robot]

Same here, using v2.2.0, tested in Chrome, FF, IE.
The same thing happens when I minimize browser window for a moment and then maximizes.

[ocvninfo]

Same issue. I must drag slide to active autoplay again.

[ChamesBont]

Same Problem. Autoplay stops after tab switch.

[pascalporedda]

(Sorry about the canned reply.)

You have not added a link to a working live example.

Please add a link to a page where I can verify this error. You can use a service like jsfiddle, plnkr, jsbin or codepen.

And make sure you're using the latest Owl Version! I will close this issue for now, once you provided a working example you can reopen it.

[Very-Bad-Robot]

Live example is on Your Demo page https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html. Please switch tab or minimize window, wait 3sec. and go back to this demo page.

[ocvninfo]

This is important!
Can anyone help?

[Very-Bad-Robot]

Unfortunately only unaor can reopen this issue...

[unaor]

i dont think i have privileges to reopen #1727

[pascalporedda]

Okay, confirmed.

[jstneti01]

Btw same thing happens when autoplayHoverPause is set to true. After hovering over, it stops the autoplay. To activate autoplay again I must drag the slide.

[ocvninfo]

@jstneti01 Exactly like that.

[unaor]

any news?

[Nedgeva]

Seems like reason of this strange autoplay behaviour lies in 'owl.autoplay.js' file in 'Autoplay.prototype._getNextTimeout' function. Everytime '_getNextTimeout' get called it checks internal state and document visibility ('document.hidden'). My guess is that removing unnecessary check for document.hidden would solve this problem.

[alalfakawma]

yes, can't please clients with autoplay stopping randomly

[unaor]

@Nedgeva solution works for me, i commented this part for the time being

[rushi-regur]

This didn't worked in my case

[Nedgeva]

@rushi-regur comment out whole statement as following
/*if (this._paused || this._core.is('busy') || this._core.is('interacting') || document.hidden) {return;}*/

That should work.

[rushi-regur]

@Nedgeva Thanks for your prompt response.

No luck again...
BTW I am using Owl Carousel 2.2.1 in Chrome browser. Also tried it with Mozilla, but didn't worked.

Shall I go back to a previous version?

[unaor]

to me it works, make sure you're loading the version you have edited and not the minified version

[nickicool]

If use this variant comment statement:

/*if (this._paused || this._core.is('busy') || this._core.is('interacting') || document.hidden) {return;}*/

... paused not workin on mouse hover. But if do this variant:

if (this._paused 
// || this._core.is('busy') 
|| this._core.is('interacting')
// || document.hidden
) {return;}

All works - and start autoplayng after mouse over, and after tab changed. Test in FF 51, Chome 56 and IE 10. Use 2.2.1 version Owl carousel not minifed.

<script src="../design/js/vendor/OwlCarousel/src/owl.carousel.js"></script>
<script src="../design/js/vendor/OwlCarousel/src/owl.animate.js"></script>
<script src="../design/js/vendor/OwlCarousel/src/owl.navigation.js"></script>
<script src="../design/js/vendor/OwlCarousel/src/owl.autoplay.js"></script>
<script src="../design/js/vendor/OwlCarousel/src/owl.support.js"></script>
    $("#slider").owlCarousel({
        animateOut: 'fadeOutDown',
        animateIn: 'fadeInDown',
        loop: true,
        autoplay: true,
        autoplayTimeout: 1000,
        autoplayHoverPause: true,
        nav: true,
        navContainerClass: 'nav',
        navText: ['', ''],
        navElement: 'a',
        navClass: ['prev', 'next'],
        items:1,
    });

Sorry for my bad english!!!
Hope soon this BOTH bugs will fixed :)

[rushi-regur]

@Nedgeva @unaor @nickicool Thanks for your help! :)

[chiragunadkat78]

@nickicool Thanks, This works for me.

[coudrak]

@nickicool Not working for the mousehover for me... it stops and after need to do drag to start again.
But if fixed the tab switch.

[webns]

Have this problem too. I found out that problem is the timeout won't start after hover or switch tab. My solution is next

if (this._paused || this._core.is('busy') || this._core.is('interacting') || document.hidden) {
    this._setAutoPlayInterval();
    return;
}

It's works well for me, but be carefully :)

[tdecaluwe]

I'll try to shed some light on why you're seeing this and various other bugs.

The problems you're seeing were unintentionally introduced by commit a062b49c900f20c8b67cf954040e49d642816ef2. In this commit the autoplay plugin migrated the setInterval call to chained setTimeout calls. The setTimeout chain is introduced by this event handler (that you'll find in the same commit):

'changed.owl.carousel': $.proxy(function(e) {
    if (e.namespace && e.property.name === 'position') {
        //console.log('play?', e);
        if (this._core.settings.autoplay) {
            this._setAutoPlayInterval();
        }
    }
}, this)

The position property is changed by the animation which in turn triggers the next timeout. However, in certain cases, the animation is suppressed. These cases are governed by this line in the source code:

if (this._paused || this._core.is('busy') || this._core.is('interacting') || document.hidden) {

If any of these are true the animation will not take place and the setTimeout chain will be broken. This is the real problem you want to solve. So if you wanted a quick fix you could just use the below code instead of the event listener:

Autoplay.prototype._getNextTimeout = function(timeout, speed) {
    if ( this._timeout ) {
        window.clearTimeout(this._timeout);
    }
    return window.setTimeout($.proxy(function() {
        this._setAutoPlayInterval(timeout, speed);
        if (this._paused || this._core.is('busy') || this._core.is('interacting') || document.hidden) {
            return;
        }
        this._core.next(speed || this._core.settings.autoplaySpeed);
    }, this), timeout || this._core.settings.autoplayTimeout);
};

The reason the original author used a different approach can be found in issue #993. To solve both issues and a bunch of others I proposed PR #1942.

[daviddeutsch]

See #1942

[rajemahendra21]

@Nedgeva Thnx its working...

[cerensimsek1984]

@nickicool Thanks its works fine but there is a question:
AutoplayHoverPause: true, is working but when mouse leave hover, it s not working again. Any idea?

[tdecaluwe]

Which version did you use? Could you provide a jsfiddle example?

[cerensimsek1984]

Owl Carousel v2.2.1 and jQuery v2.1.1

if (this._paused // || this._core.is('busy') || this._core.is('interacting') // || document.hidden ) {return;}
this is working for "autoplay stops working after tab switch" but AutoplayHoverPause: true, is not working when mouse leave hover.

[dhullsumit]

@nickicool thanks, now working with tab switch.

[got3nks]

I'm having the same issue. Has the fix been merged yet?

[exilvm]

@got3nks It should be fixed in this version.

[mukhammad-akilov]

Was this bug fixed in version 2.3.2?

[cheaDalin]

I also have the same problem with 2.2.0 version so that I decide to change to use 2.3.4 version, yeah It is worked for me right now