fullPage.js scrollSectionDown auto cycle

Question

I am using fullPage.js to create a full screen slider. The slider should auto cycle through sections, I am using the following code:

var idInterval;

    $(document).ready(function () {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
            sectionsColor: ['#8FB98B', 'green', '#EAE1C0', '#333333', '#AA4321'],
            slidesNavigation: true,
            loopBottom: true,


            afterLoad: function (anchorLink, index) {
                if (index == 1) {
                    idInterval = setInterval(function () {
                        $.fn.fullpage.moveSectionDown();
                    }, 1500);
                }
            if (index == 5) {
                    clearInterval(idInterval);
                }
            }
        });
    });

When reaching the fifth slide the slider stops and does not cycle on. If I do not clear the interval the slider does not work properly. I have followed the same code as I would use when auto cycling with moveSlideRight(); but it somehow does not work the same with moveSectionDown.

View the fiddle: http://jsfiddle.net/2dhkR/254/

Any ideas?

Answer 1

That's because you don't need a setInterval. You need a setTimeout in this case. It makes no sense to start an interval every time you reach the 1st section.

As afterLoad is called once any section loads, just use that.

afterLoad: function (anchorLink, index) {
    setTimeout(function () {
        $.fn.fullpage.moveSectionDown();
    },1500);
}

Demo online