Настройка расширений

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

Пример подключения через HTML:

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

Инициализация расширений

Каждое расширение требует отдельной настройки при инициализации fullPage.js. Общая структура вызова выглядит так:

new fullpage('#fullpage', {
    licenseKey: 'YOUR_KEY_HERE',
    navigation: true,
    scrollHorizontally: true, // Включение расширения scrollHorizontally
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
});

Ключевые моменты:

  • navigation: включает встроенную вертикальную навигацию.
  • scrollHorizontally: активирует горизонтальные слайдеры.
  • Каждое расширение добавляет собственные параметры конфигурации, которые можно настроить через объект инициализации.

Настройка расширения Scroll Horizontally

Расширение Scroll Horizontally позволяет создавать горизонтальные секции внутри вертикальной страницы. Для его работы необходимо:

  1. Добавить контейнер с классом fp-horizontal.
  2. В каждой горизонтальной секции создать слайды с классом fp-slide.

Пример структуры HTML:


    

        
Слайд 1

        
Слайд 2

        
Слайд 3

Дополнительные параметры для расширения:

scrollHorizontally: {
    autoScrolling: true,
    fitToSection: false,
    dragAndMove: true
}
  • autoScrolling: управляет прокруткой внутри горизонтальной секции.
  • fitToSection: включает автоматическое центрирование слайдов.
  • dragAndMove: позволяет пользователю перемещать слайды мышью или пальцем.

Настройка расширения Navigation

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

Пример конфигурации:

navigation: true,
navigationPosition: 'right',
navigationTooltips: ['Первая', 'Вторая', 'Третья', 'Четвертая'],
showActiveTooltip: true
  • navigationPosition: определяет положение навигационной панели ('right' или 'left').
  • navigationTooltips: задаёт текст всплывающих подсказок для каждой секции.
  • showActiveTooltip: отображает подсказку для активной секции.

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

controlArrows: true, // стрелки навигации
slidesNavigation: true // навигация по слайдам

Использование расширения Continuous Vertical

Расширение Continuous Vertical позволяет создавать бесконечную вертикальную прокрутку. Включение:

continuousVertical: true

Особенности:

  • После последней секции прокрутка возвращает пользователя на первую.
  • Совместимо с горизонтальными слайдерами, но требует внимательной настройки loopHorizontal.
loopHorizontal: true

Лицензирование расширений

Все официальные расширения fullPage.js требуют корректной лицензии. При использовании без лицензии:

  • Возможны ограничения функционала.
  • Отображается уведомление в консоли о необходимости покупки лицензии.

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

licenseKey: 'YOUR_LICENSE_KEY'

Совместная настройка нескольких расширений

При одновременном использовании нескольких расширений важно:

  1. Проверять совместимость параметров (loopHorizontal, continuousVertical, scrollHorizontally).
  2. Подключать расширения в правильном порядке.
  3. Учитывать приоритеты: расширения могут переопределять поведение друг друга, например, автоматическая прокрутка горизонтального слайдера может конфликтовать с вертикальным loop.

Пример полной конфигурации с несколькими расширениями:

new fullpage('#fullpage', {
    licenseKey: 'YOUR_LICENSE_KEY',
    navigation: true,
    navigationPosition: 'right',
    navigationTooltips: ['Секция 1', 'Секция 2'],
    showActiveTooltip: true,
    scrollHorizontally: true,
    continuousVertical: true,
    loopHorizontal: true,
    controlArrows: true,
    slidesNavigation: true
});

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

Оглавление