Reset Sliders

FullPage.js предоставляет мощные инструменты для организации многостраничных сайтов с вертикальной и горизонтальной прокруткой. Внутри секций часто используются слайдеры, реализованные через вложенные секции (.fp-slides) или внешние интеграции. Иногда требуется сбросить слайдеры в исходное состояние, например, после перехода на определённую секцию или при обновлении контента.

Структура слайдера в fullPage.js

Слайдеры в fullPage.js создаются с использованием класса .fp-slides для контейнера и .fp-slide для отдельных слайдов:

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
    <div class="slide">Слайд 3</div>
</div>

При инициализации fullPage.js слайдер автоматически получает навигацию, плавное переключение и управление клавишами.

new fullpage('#fullpage', {
    sectionsColor: ['#1abc9c', '#3498db', '#9b59b6'],
    controlArrows: true,
    loopHorizontal: false
});

Методы для работы со слайдерами

Основной инструмент для сброса слайдера — метод moveToSlide или moveTo для возвращения на первый слайд.

// Переход на первый слайд в текущей секции
fullpage_api.moveTo(fullpage_api.getActiveSection().index + 1, 0);

Здесь:

  • getActiveSection().index возвращает индекс текущей секции (нумерация с 0).
  • Второй аргумент 0 указывает первый слайд.

Также можно использовать событие onLeave, чтобы автоматически сбрасывать слайдер при уходе из секции:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        const slides = origin.item.querySelectorAll('.fp-slide');
        if(slides.length > 0){
            fullpage_api.moveTo(origin.index + 1, 0);
        }
    }
});

Сброс всех слайдеров на странице

Для случаев, когда требуется сбросить все слайдеры, удобно пройтись по всем секциям с слайдами и вернуть их к первому слайду:

function resetAllSliders(){
    const sections = document.querySelectorAll('.fp-section');
    sections.forEach((section, i) => {
        const slides = section.querySelectorAll('.fp-slide');
        if(slides.length > 1){
            fullpage_api.moveTo(i + 1, 0);
        }
    });
}

Вызов этой функции гарантирует, что все слайдеры вернутся к первому слайду, независимо от того, на каком слайде пользователь находился.

Интеграция с динамическим контентом

При динамической подгрузке контента важно обновлять слайдеры после изменения DOM. Для этого используется метод fullpage_api.reBuild(), который пересчитывает размеры секций и слайдов, а затем можно сбросить слайды:

// После динамического добавления слайдов
fullpage_api.reBuild();
resetAllSliders();

Это предотвращает некорректное позиционирование слайдов и сохраняет плавность прокрутки.

Сброс слайдера через события

FullPage.js поддерживает несколько событий, позволяющих контролировать состояние слайдера:

  • afterLoad — после загрузки секции.
  • onSlideLeave — при уходе со слайда.
  • afterSlideLoad — после загрузки слайда.

Пример автоматического сброса при уходе со слайда:

new fullpage('#fullpage', {
    onSlideLeave: function(section, origin, destination, direction){
        if(direction === 'right'){
            fullpage_api.moveTo(section.index + 1, 0);
        }
    }
});

Важные нюансы

  1. Индексация: fullPage.js использует нумерацию слайдов с нуля. Ошибка в индексе может привести к некорректному сбросу.
  2. Плавность: метод moveTo поддерживает анимацию, но при необходимости мгновенного сброса можно использовать CSS классы или временно отключить scrollingSpeed.
  3. Совместимость с плагинами: при интеграции внешних слайдеров (например, Swiper или Slick) необходимо синхронизировать их состояние с fullPage.js.

Практическое использование

Сценарии, когда требуется сброс слайдера:

  • Переход на новую секцию, где предыдущий слайдер не должен сохранять положение.
  • Обновление контента через AJAX.
  • Использование модальных окон или popup-эффектов с вложенными слайдерами.

С помощью комбинации moveTo, reBuild и событий onLeave/afterLoad достигается полный контроль над состоянием всех слайдеров, обеспечивая удобную и предсказуемую навигацию.

Оглавление