Timers and AutoPlay

[bradvin]

Awesome library - thanks!

I was wondering if you have had anyone asking for an autoplay option? So basically you can get rid of the menu and let it play through the pile of pages automatically. If this is done, then you obviously need another option for autoplayDuration which is the amount of time it stays on each page before navigating to the next.

This can then be used in conjunction with the loop option to setup a fullpage slideshow of sorts that can be displayed on a monitor.

Further to this, you could setup different durations per page/section, so that you could have a video clip on a page that plays for 30 seconds and then moves onto the next page, while other pages only show for 10 seconds as they might only have static images.

Something like this:

$('#pagepiling').pagePiling({
    loopBottom: true,
    autoPlay: true,
    autoPlayDuration: [10000, 20000, 5000, 10000]
});

[alvarotrigo]

Nop, no one asked for that, although there are similar questions regarding the autoplay for the brother plugin fullPage.js.

Basically you can achieve it by using the methods and callbacks provided by pagePiling.js:
Live demo

It is a very specific task that I believe shouldn't be in included in the plugin. The plugin offers the methods and callbacks to achieve it and the rest is left to the developer.

var interval;
var autoPlayDuration = 1000;

$('#pagePiling').pagepiling({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    loopBottom: true,
    afterLoad: function (anchorLink, index) {
        clearInterval(interval);

        setTimeout(function () {
            interval = getInterval();
        },autoPlayDuration);
    },
    afterRender: function () {
        interval = getInterval();
    }
});

function getInterval() {
    return setInterval(function () {
        $.fn.pagepiling.moveSectionDown();
    }, autoPlayDuration);
}

[bradvin]

thanks for the code :)

[AntonHonchar]

It doesn't work well and crashes after a little time.
In Live Demo it's also broken. Any ideas?

[alvarotrigo]

Live demo is working for me. You'll have to be a bit more specific and detail under what circumstances it breaks or what you really when by "it crashes".

[AntonHonchar]

Thanks for your quick reply. It works for the first time. But when you click for navigation dots few times, the slides begin loop with very hight speed and sometimes break order.
Can you just try on demo? After 1 minute you'll see)
Anyway, the plugin is great, thank you.

[alvarotrigo]

Yeah I see. I forgot to clear the timeout. See this demo:
http://jsfiddle.net/fzwp74kq/1/

Code:

var interval;
var timeout;
var autoPlayDuration = 1000;

$('#pagePiling').pagepiling({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    loopBottom: true,
    afterLoad: function (anchorLink, index) {
        clearInterval(interval);
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            interval = getInterval();
        },autoPlayDuration);
    },
    afterRender: function () {
        interval = getInterval();
    }
});


function getInterval() {
    return setInterval(function () {
        $.fn.pagepiling.moveSectionDown();
    }, autoPlayDuration);
}

[AntonHonchar]

It'a AMAZING! Work perfect)
You are the best!
Thank you very much!

[AntonHonchar]

Hello, alvarotrigo.
I've just found one more interesting thing.
So we have - var autoPlayDuration = 1000;
But first slide (when page load ) change much faster than 1000. After that everything is ok.
Do you have any ideas how to fix that? Because it's really to fast (just first slide)