autoPlay advances while tab is in background

[mojde-pajang]

when set slider "autoPlay:true" and open page including slider in another browser tab , if I click on slider tab, slider playing crazy fast and it seems that autoplay is working when we tab is not active too; I record video for this issue if you want i can email it;

[devil1991]

@mojde-pajang removing the isWrapped from the Autoplay fixes it see here ->
e072dfe

[Krilo89]

When the settings autoPlay and wrapAround are true, this happens. When wrapAround isn't true, it doesn't happen because the ticker stops when reaching to the end of the slider.

-edit-
When the prevNextButtons are false, you can disable wrapAround to prevent the slider for going crazy, because the only way to navigate in the slider is through the pageDots.
When the prevNextButtons are true, you can't click the buttons when reaching the end or the beginning, because wrapAround isn't true. When you have these exact settings, the ticking must stop when you don't view the page.

@devil1991 Do you mean you changed
_this.parent.next(true);
to
_this.parent.next();
and then the crazy scrolling diddn't happen anymore?

[desandro]

I still have trouble reproducing this issue. What browsers are you experiencing this in?

I do not recommend @devil1991's solution as it would not solve the underlying problem.

[Krilo89]

I use Google Chrome Versie 51.0.2704.84 m.
You have to refresh your page and while the page refreshes, you move to an other tab inside your browser. Then after a while (20 seconds), you move back to the first tab.
You will see the slider spinning back to the first slide (I think). It looks like the slider wants to back to the first slide, because you never saw the first slide after the page load.

Maybe this can help you, otherwise I can send you a link of a website I'm building where it happens. I diddn't see this problem earlier, because when you're just browsing, you don't really browse away from pages you're refreshing. This only happens when debugging and building a site.

[devil1991]

Hey @Krilo89 yeah the issue wasn't resolved.
So I created a work around for my case by calling
this.parent.select(0, false, true) inside the visibilityChange method, before it resumes the player.
devil1991@edd234b

[JosephSafarzade]

Hi there

first you should add a class to slider container to show its on autoplay , we assume the slider have a "yes" class that show its on auto play mode

now before you call flickity function check for document.visibilityState , if its visible then call it normally as you like but if its not you should call pause method ( for sliders that have yes class ) after your called the flickity

please see following code ( the i used because we call these function in loop , you can use the selector as you like )

if(document.visibilityState == 'visible'){
            var l = i.flickity({
                contain: !0,
                draggable: !0,
                lazyLoad: !1,
                imagesLoaded: !0,
                percentPosition: !0,
                pageDots: !0,
                resize: !0,
                setGallerySize: !0,
                wrapAround: !0,
                autoPlay: autoplay,
                prevNextButtons: !1,
                accessibility: !1,
                selectedAttraction:.01,
                friction:.2,
                pauseAutoPlayOnHover: false
            });
        }else {
            var l = i.flickity({
                contain: !0,
                draggable: !0,
                lazyLoad: !1,
                imagesLoaded: !0,
                percentPosition: !0,
                pageDots: !0,
                resize: !0,
                setGallerySize: !0,
                wrapAround: !0,
                autoPlay: 1,
                prevNextButtons: !1,
                accessibility: !1,
                selectedAttraction:.01,
                friction:.2,
                pauseAutoPlayOnHover: false
            });
            
            $('.pixflow-slider.yes').flickity('pausePlayer')
        }

now add a function to visibilitychange event , if the tab is visible then call flickity function for the sliders that only have "yes" class , finally remove the yes class so the visibility change function does not trigger flickity on each tab change

function pixflow_visibility_change(){
    $(document).on('visibilitychange', function() {
    
        if(document.visibilityState=="visible"){
        
             $('.pixflow-slider.yes').flickity({
                contain: !0,
                draggable: !0,
                lazyLoad: !1,
                imagesLoaded: !0,
                percentPosition: !0,
                pageDots: !0,
                resize: !0,
                setGallerySize: !0,
                wrapAround: !0,
                autoPlay: 1,
                prevNextButtons: !1,
                accessibility: !1,
                selectedAttraction:.01,
                friction:.2,
                pauseAutoPlayOnHover: false
            });
        $('.pixflow-slider.yes').each(function(){
            $(this).removeClass('yes');
        });
        
       }
       
    });
}

i know its a little complicated but i thought it may be helpful for others .

[desandro]

@JosephSafarzade Thanks for pointing that the issue may be caused when a new tab is created with Flickity. autoPlay will automatically start playing on initialization, even if that page is hidden.

I've added a fix. This will be resolved in v2.

[desandro]

Flickity v2 is out now with new behavior that will not start autoPlay when the browser tab is in the background. This issue should now be resolved. Please chime in if you continue to see this issue.

[mojde-pajang]

thank's for fixing this issue 🌻

On Mon, Jul 11, 2016 at 9:50 PM, David DeSandro notifications@github.com
wrote:

Flickity v2 is out now http://flickity.metafizzy.co/ with new behavior
that will not start autoPlay when the browser tab is in the background.
This issue should now be resolved. Please chime in if you continue to see
this issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#388 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ALqr3S_OCxUas_SjebWPegRewPqTywy6ks5qUnt2gaJpZM4IqOKu
.

[desandro]

I'm closing this issue as fixed.