set and clearing intervals to automatically scroll sections in fullPage.js

Question

I have been trying to create a site using fullPage.js, in which there are 5 vertical sections, 2 of which have horizontal slides. One of these I would like to scroll sideways automatically, and the other I want to scroll manually, ie be controlled by the user.

So far I am almost there, I set the interval after the page renders at 1500 ms, and the clear this interval when the page reaches the 5th "manual" section. There is a working version here:

http://jsfiddle.net/2dhkR/187/

The 2 problems I have are that after reaching the 5th section, upon returning to the 2nd "autmatic" scrolling section the scrolling does not resume. Also, the 5th section still scrolls one slide before stopping.

heres my code so far:

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

        afterRender: function(){
        idInterval = setInterval(function(){
                $.fn.fullpage.moveSlideRight();
        }, 1500);
    },

        //turns off the automatic scrolling. NEEDS TO BE TURNED BACK ON
        afterLoad: function(anchorLink, index){
           //using index
           if(index == 5){
               clearInterval(idInterval);
           }
    }
});
    });

Ive tried resetting the interval after this, using:

           if(index == 2){
               setInterval(function(){
                $.fn.fullpage.moveSlideRight();
        }, 1500);
           }

but this does not work, and seems to speed up the automatic scrolling.

Could anyone help me order these commands, and decide which fullpage.js callback to use (https://github.com/alvarotrigo/fullPage.js#callbacks )?

Thanks a lot

Answer 1

It doesn't make any sense that you try to slideRight using the afterRender callback.

You should only do it on the 2nd section, use the afterLoad callback instead, which will also be fired every time you access a section.

Living demo

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 == 2) {
                idInterval = setInterval(function () {
                    $.fn.fullpage.moveSlideRight();
                }, 1500);
            }
            //using index
            if (index == 5) {
                clearInterval(idInterval);
            }
        }
    });
});