HTML5 page visibility API & fullpage.js autoslides

Question

I'm trying to modify the autoplay slides method seen here, to stop when the user switches away to another tab.

This way the autoplaying stops when a user switching away and when he/she returns the slide will not have auto-cycled yet. When the user is back the auto-cycling should continue.

The HTML5 visibility API function should look something like this:

document.addEventListener("visibilitychange", function() {

if (document.hidden) {     
//stops the autoplay slider

} else {
//resumes the autoplay slider
}});

Thus far I've tried simply adding a variable where the "15000" number should be but this approach doesn't work.

afterRender: function () {
    slideTimeout = setInterval(function () {
         $.fn.fullpage.moveSectionDown();
        }, 15000);

    }

Is there any way to get this working?

Thanks in advance

Answer 1

Try this:

var slideTimeout;

function startAutoPlay(){
   slideTimeout = setInterval(function () {
       $.fn.fullpage.moveSectionDown();
   }, 15000);
}

function stopsAutoPlay(){
   clearInterval(slideTimeout);
}

document.addEventListener("visibilitychange", function(){
    if(document.hidden){     
       stopsAutoPlay();
    }
    else{
       startsAutoPlay();
    }
});