scrollHorizontally

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

Подключение scrollHorizontally

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

<link rel="stylesheet" href="fullpage.css">
<script src="fullpage.js"></script>
<script src="scroll-horizontally.js"></script>

Важно подключать scroll-horizontally.js после основного скрипта, так как плагин расширяет функциональность ядра.

Инициализация fullPage.js с горизонтальным скроллом

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

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    slidesNavigation: true,
    controlArrows: true,
    loopHorizontal: false,
    scrollHorizontally: true
});

Пояснение параметров:

  • scrollHorizontally: true — включает горизонтальную прокрутку слайдов внутри секций.
  • loopHorizontal: true/false — задает циклическое переключение слайдов.
  • slidesNavigation: true — отображение навигации для слайдов.
  • controlArrows: true — стрелки для ручного переключения слайдов.

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

Горизонтальные слайды организуются внутри секции с классом .section с дополнительным контейнером .slide:

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

Каждая секция может содержать один или несколько слайдов. Если слайдов несколько, активируется горизонтальная навигация.

Настройка поведения прокрутки

scrollHorizontally использует события колесика мыши, сенсорных свайпов и клавиш для переключения между слайдами. Можно дополнительно настроить скорость анимации и чувствительность свайпов:

new fullpage('#fullpage', {
    scrollHorizontally: true,
    scrollingSpeed: 700,          // скорость прокрутки секций
    easingcss3: 'ease-in-out',    // плавность анимации
    touchSensitivity: 15          // чувствительность свайпов
});
  • scrollingSpeed задает скорость перехода между секциями и слайдами в миллисекундах.
  • easingcss3 определяет кривую анимации CSS3 для плавности движения.
  • touchSensitivity влияет на скорость реакции свайпов на мобильных устройствах.

Взаимодействие с навигацией

Горизонтальные слайды поддерживают как стрелки, так и навигацию в виде точек. Для секций с несколькими слайдами отображается slidesNav, который можно стилизовать через CSS:

.fp-slidesNav ul li a span {
    background: #333;
}
.fp-slidesNav ul li a.active span {
    background: #f00;
}
  • Активный слайд подсвечивается красным цветом.
  • Стилизация позволяет создавать визуальные подсказки пользователю о текущем положении в слайд-шоу.

События scrollHorizontally

FullPage.js предоставляет ряд событий для работы с горизонтальным скроллом:

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

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

Ограничения и особенности

  • Горизонтальная прокрутка работает только внутри секций с несколькими слайдами.
  • Для корректной работы рекомендуется использовать autoScrolling: true.
  • Плагин scrollHorizontally.js требует последней версии fullPage.js.
  • При использовании touch-свайпов важно настроить touchSensitivity, иначе скролл может быть слишком быстрым или медленным.

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

Комбинация scrollHorizontally и loopHorizontal позволяет создавать полноценные слайд-шоу внутри секций, которые можно прокручивать как мышью, так и с клавиатуры. Стилизация стрелок и точек навигации обеспечивает удобство интерфейса, а события onSlideLeave и afterSlideLoad дают полный контроль над динамическим содержимым.

scrollHorizontally превращает стандартные горизонтальные слайды в полноценный инструмент для интерактивного контента, упрощая реализацию сложных презентаций и лендингов с множеством секций и анимаций.

Оглавление