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

那是因为你不需要setInterval。在这种情况下，您需要setTimeout。每次到达第一部分时开始一个间隔是没有意义的。

当任何部分加载时调用afterLoad，只需使用它。

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

Demo online

fullPage.js scrollSectionDown auto cycle

1 个答案: