Continuous Horizontal

Для использования Continuous Horizontal в fullPage.js необходимо подключить библиотеку и CSS-стили. Минимальный набор выглядит так:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.28/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.28/fullpage.min.js"></script>

Инициализация выполняется через конструктор new fullpage(), где указывается селектор контейнера и конфигурация:

new fullpage('#fullpage', {
    // Основная конфигурация
    licenseKey: 'YOUR_KEY_HERE',
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
    continuousHorizontal: true, // ключевой параметр для бесконечной горизонтальной прокрутки
    scrollHorizontally: true,
    navigation: true,
    controlArrows: true
});
  • continuousHorizontal: true — активирует бесконечное цикличное движение между слайдами горизонтально.
  • scrollHorizontally: true — включает прокрутку горизонтальных слайдов с помощью колесика мыши, клавиш и тач-жестов.
  • controlArrows: true — отображение стрелок для перехода между слайдами.

Структура HTML для горизонтальных слайдов

Каждая секция может содержать горизонтальные слайды. Структура выглядит следующим образом:

<div id="fullpage">
    <div class="section">
        <div class="slide">Слайд 1.1</div>
        <div class="slide">Слайд 1.2</div>
        <div class="slide">Слайд 1.3</div>
    </div>
    <div class="section">
        <div class="slide">Слайд 2.1</div>
        <div class="slide">Слайд 2.2</div>
    </div>
    <div class="section">Секция без слайдов</div>
</div>
  • Элементы с классом .section — это вертикальные блоки.
  • Внутри секций элементы с классом .slide формируют горизонтальные слайды.
  • Continuous Horizontal работает только в секциях с более чем одним слайдом.

Управление переходами между слайдами

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

fullpage_api.moveSlideRight(); // переход к следующему слайду
fullpage_api.moveSlideLeft();  // переход к предыдущему слайду
fullpage_api.silentMoveTo('section2', 1); // переход к конкретному слайду
  • silentMoveTo(section, slide) — мгновенный переход без анимации.
  • moveSlideRight и moveSlideLeft учитывают параметр continuousHorizontal и автоматически создают эффект бесконечного цикла.

Настройка навигации и стрелок

Навигационные элементы можно включать как вертикально, так и горизонтально:

navigation: true,         // точки навигации слева
slidesNavigation: true,   // точки для слайдов внутри секций
controlArrows: true       // стрелки для слайдов
  • slidesNavigation: true автоматически генерирует навигацию для каждого горизонтального слайда.
  • Стрелки (controlArrows) учитывают бесконечную прокрутку, поэтому при достижении последнего слайда переход происходит на первый.

Интеграция с touch- и wheel-событиями

Полная поддержка жестов на мобильных устройствах достигается включением горизонтальной прокрутки:

scrollHorizontally: true

При этом можно настроить чувствительность свайпов и поведение прокрутки:

new fullpage('#fullpage', {
    continuousHorizontal: true,
    scrollHorizontally: true,
    touchSensitivity: 15,
    normalScrollElements: '.scrollable', // блоки с обычной прокруткой
});
  • touchSensitivity регулирует чувствительность свайпа (чем выше значение — тем сильнее жест требуется для переключения слайда).
  • normalScrollElements позволяет избежать конфликта прокрутки внутри скроллящихся элементов на странице.

Анимации и переходы

FullPage.js поддерживает кастомизацию анимаций при переходах между горизонтальными слайдами:

.fp-slidesContainer {
    transition: transform 0.7s ease-in-out;
}
  • Для плавного эффекта можно изменить transition-duration и transition-timing-function.
  • При continuousHorizontal: true библиотека автоматически корректирует transform для бесконечного движения, поэтому кастомные эффекты должны учитывать цикличность слайдов.

События и обратные вызовы

Библиотека предоставляет множество событий для горизонтальных слайдов:

new fullpage('#fullpage', {
    continuousHorizontal: true,
    onSlideLeave: function(section, origin, destination, direction){
        console.log(`Переход слайда из ${origin.index} в ${destination.index}`);
    },
    afterSlideLoad: function(section, origin, destination, direction){
        console.log(`Слайд ${destination.index} загружен`);
    }
});
  • onSlideLeave — срабатывает перед сменой слайда.
  • afterSlideLoad — вызывается после завершения анимации.
  • Все события учитывают бесконечную цикличность.

Оптимизация производительности

При большом количестве слайдов важно учитывать:

  • Lazy loading изображений через data-src и lazyLoad плагин.
  • Минимизацию DOM-элементов, чтобы не перегружать контейнер.
  • Отключение scrollHorizontally на десктопе, если навигация стрелками или мышью не нужна.

Пример оптимизации:

new fullpage('#fullpage', {
    continuousHorizontal: true,
    scrollHorizontally: window.innerWidth < 1024, // только для мобильных
    lazyLoading: true
});

Комбинация с вертикальной прокруткой

Continuous Horizontal можно комбинировать с вертикальными секциями. При этом поведение будет следующим:

  • Горизонтальные слайды внутри секции переключаются циклично.
  • При достижении конца горизонтальных слайдов происходит переход к следующей вертикальной секции.
  • Переход обратно на предыдущую секцию при движении влево/вправо сохраняется корректно.

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

Оглавление