установить и очистить интервалы для автоматической прокрутки разделов в fullPage.js

Я пытался создать сайт с помощью fullPage.js, в котором есть 5 вертикальных разделов, 2 из которых имеют горизонтальные слайды. Один из них я хотел бы прокручивать вбок автоматически, а другой я хочу прокручивать вручную, т.е. управлять пользователем.

Пока я почти у цели, я установил интервал после рендеринга страницы в 1500 мс и очищаю этот интервал, когда страница достигает 5-го «ручного» раздела. Здесь есть рабочая версия:

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

У меня 2 проблемы в том, что после достижения 5-го раздела, при возвращении во 2-й "автоматический" раздел прокрутки прокрутка не возобновляется. Кроме того, 5-й раздел все еще прокручивает один слайд перед остановкой.

вот мой код до сих пор:

$(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);
           }
    }
});
    });

После этого я попытался сбросить интервал, используя:

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

но это не работает и, кажется, ускоряет автоматическую прокрутку.

Может ли кто-нибудь помочь мне заказать эти команды и решить, какой обратный вызов fullpage.js использовать (https://github.com/alvarotrigo/fullPage.js#callbacks )?

Большое спасибо


javascript jquery setinterval clearinterval fullpage.js
person awnine    schedule 10.11.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Нет смысла пытаться скользить вправо с помощью обратного вызова afterRender.

Вы должны делать это только во 2-м разделе, вместо этого используйте обратный вызов afterLoad, который также будет запускаться каждый раз, когда вы получаете доступ к разделу.

Живая демонстрация

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);
            }
        }
    });
});
person Alvaro    schedule 11.11.2014
comment
еще один вопрос @Alvaro, если я изменю раздел с автоматической прокруткой на первый, он не прокручивается автоматически при загрузке, а только когда я возвращаюсь к нему после перехода, а затем возвращаюсь к нему. У меня есть пример здесь: jsfiddle.net/2dhkR/191 как мне изменить обратные вызовы/порядок так что это работает, когда пользователь впервые загружает страницу? Спасибо - person awnine; 13.11.2014
comment
Вам также нужно будет использовать afterRender, проверьте это: jsfiddle.net/2dhkR/192 - person Alvaro; 14.11.2014