Навигация по слайдам

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

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

Инициализация fullPage.js выполняется через Jav * aScript:

new fullpage('#fullpage', {
  navigation: true,          // Отображение точек навигации по секциям
  controlArrows: true,       // Стрелки для переключения между слайдами внутри секции
  slidesNavigation: true,    // Навигация для слайдов
  loopHorizontal: false,     // Запрет циклического переключения слайдов
  scrollingSpeed: 700        // Скорость анимации прокрутки
});

Здесь ключевые опции для навигации по слайдам:

  • controlArrows – включает/отключает стрелки влево/вправо для перемещения между слайдами внутри секции.
  • slidesNavigation – отображает навигационные точки для каждого слайда, обычно внизу секции.
  • loopHorizontal – позволяет зациклить навигацию между первым и последним слайдом.

Программное управление навигацией

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

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

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

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

document.getElementById('prev-slide').addEventListener('click', () => {
  fullpage_api.moveSlideLeft();
});

// Переход на второй слайд первой секции
fullpage_api.moveTo(1, 2);

Здесь важно помнить, что индексация секций и слайдов начинается с 1.

Обработка событий слайдов

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

  • onSlideLeave(section, origin, destination, direction) – срабатывает при уходе с текущего слайда.
  • afterSlideLoad(section, origin, destination, direction) – срабатывает после завершения перехода на новый слайд.

Пример логирования перехода между слайдами:

new fullpage('#fullpage', {
  onSlideLeave: function(section, origin, destination, direction){
    console.log(`Покидаем слайд ${origin.index + 1}, направление: ${direction}`);
  },
  afterSlideLoad: function(section, origin, destination, direction){
    console.log(`Загружен слайд ${destination.index + 1}`);
  }
});

Аргументы событий позволяют получить информацию о текущей секции, исходном и целевом слайде, а также направлении движения ('left' или 'right').

Горизонтальная и вертикальная навигация

fullPage.js поддерживает комбинацию вертикальной навигации по секциям и горизонтальной навигации по слайдам.

  • Вертикальная прокрутка осуществляется стандартными жестами мыши/тача или с помощью moveSectionUp() / moveSectionDown().
  • Горизонтальная прокрутка слайдов управляется через стрелки, свайпы или API (moveSlideLeft(), moveSlideRight()).

Можно комбинировать оба вида навигации:

fullpage_api.moveSectionDown(); // Переход к следующей секции
fullpage_api.moveSlideRight();   // Переход к следующему слайду внутри секции

При использовании навигационных стрелок важно учитывать loopHorizontal и loopTop/loopBottom для зацикливания навигации.

Кастомные элементы управления

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

<button id="custom-next">Следующий слайд</button>
<button id="custom-prev">Предыдущий слайд</button>
document.getElementById('custom-next').addEventListener('click', () => {
  fullpage_api.moveSlideRight();
});

document.getElementById('custom-prev').addEventListener('click', () => {
  fullpage_api.moveSlideLeft();
});

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

Навигация через URL и хеши

fullPage.js поддерживает изменение URL при смене слайдов и секций.

new fullpage('#fullpage', {
  anchors: ['firstSection', 'secondSection'], // Анкоры для секций
  menu: '#menu',                              // Привязка к навигационному меню
  slidesNavigation: true
});
  • При переходе на слайд URL обновляется с хешем вида #firstSection/1.
  • Это позволяет прямые ссылки на конкретные слайды и интеграцию с браузерной навигацией «Назад/Вперед».

Дополнительные тонкости

  • Использование scrollHorizontally позволяет прокручивать слайды при свайпе или колесе мыши.
  • Плагин fullpage.extensions.min.js добавляет поддержку touch-событий для горизонтальной навигации.
  • Для динамически добавленных слайдов или секций следует использовать методы fullpage_api.reBuild() или fullpage_api.destroy('all') с последующей инициализацией.

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

Оглавление