Циклическая прокрутка слайдов

Библиотека fullPage.js предоставляет возможность создавать полноэкранные сайты с вертикальной и горизонтальной навигацией. Одной из ключевых особенностей является циклическая прокрутка, когда при достижении последнего слайда или секции происходит возврат к первому, создавая эффект бесконечной карусели.

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

new fullpage('#fullpage', {
    loopTop: true,        // При прокрутке вверх с первой секции — переход на последнюю
    loopBottom: true,     // При прокрутке вниз с последней секции — переход на первую
    loopHorizontal: true, // Горизонтальная карусель для слайдов внутри секции
    navigation: true,
    controlArrows: true
});

loopTop и loopBottom работают только для вертикальных секций. Если активна горизонтальная навигация внутри секции (слайды), то для них используется loopHorizontal. Это особенно полезно для блоков с галереями или слайд-шоу.

Настройка горизонтальной циклической прокрутки слайдов

Каждая секция может содержать несколько слайдов, организованных внутри контейнера fp-slides. Для циклической горизонтальной прокрутки достаточно добавить параметр loopHorizontal: true и убедиться, что слайды обернуты в fp-slides:

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
    <div class="slide">Слайд 3</div>
</div>
new fullpage('#fullpage', {
    loopHorizontal: true,
    controlArrows: true,
    slidesNavigation: true
});

При этом можно одновременно использовать вертикальную циклическую прокрутку, сочетая оба эффекта.

Программное управление циклической прокруткой

FullPage.js предоставляет API для программного переключения слайдов:

  • fullpage_api.moveSlideRight() — переход к следующему слайду с учётом цикла.
  • fullpage_api.moveSlideLeft() — переход к предыдущему слайду.
  • fullpage_api.moveTo(sectionIndex, slideIndex) — переход к конкретной секции и слайду.

Цикличность автоматически учитывается, если включен loopHorizontal. Например:

document.querySelector('.next-slide').addEventListener('click', () => {
    fullpage_api.moveSlideRight();
});

Даже если пользователь находится на последнем слайде, вызов moveSlideRight() переместит его на первый слайд, сохраняя плавность анимации.

События для циклической навигации

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

  • afterSlideLoad(section, origin, destination, direction) — срабатывает после завершения перехода между слайдами.
  • onSlideLeave(section, origin, destination, direction) — срабатывает при начале смены слайда.

Пример использования:

new fullpage('#fullpage', {
    loopHorizontal: true,
    afterSlideLoad: function(section, origin, destination, direction){
        console.log(`Переход на слайд ${destination.index + 1} в секции ${section.index + 1}`);
    }
});

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

Управление навигационными стрелками и индикаторами

Для секций с горизонтальными слайдами доступны стрелки и индикаторы:

  • controlArrows — показывает стрелки навигации по слайдам; работают корректно с цикличностью.
  • slidesNavigation — создаёт навигационные точки для каждого слайда внутри секции.

Если включена цикличность, стрелки и точки корректно обновляют активный слайд при переходе с последнего на первый или с первого на последний.

new fullpage('#fullpage', {
    loopHorizontal: true,
    controlArrows: true,
    slidesNavigation: true
});

Практические рекомендации

  1. Сочетание вертикальной и горизонтальной цикличности: использовать loopTop, loopBottom для секций и loopHorizontal для слайдов одновременно позволяет создать полностью бесконечный UX.
  2. Оптимизация UX: при большом количестве слайдов циклическая прокрутка помогает избежать “зависания” пользователя на конце списка.
  3. События для анимаций: afterSlideLoad и onSlideLeave идеально подходят для запуска CSS или JS-анимаций при циклическом переходе.
  4. Контроль навигации: комбинация стрелок (controlArrows) и точек (slidesNavigation) обеспечивает удобную ориентацию, даже если пользователь перемещается циклически.

Циклическая прокрутка слайдов в fullPage.js позволяет создавать интерфейсы с плавной и бесконечной навигацией, сочетая вертикальные и горизонтальные движения, а гибкий API открывает широкие возможности для программного управления и интеграции интерактивных эффектов.

Оглавление