Создание слайдов внутри секций

FullPage.js позволяет не только организовывать вертикальные секции, но и создавать горизонтальные слайды внутри секций. Это особенно удобно для презентаций, портфолио или интерактивных лендингов. Основная структура HTML для слайдов выглядит так:

<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>
</div>
  • .section — обозначает вертикальный блок.
  • .slide — горизонтальный слайд внутри секции.
  • Каждая секция может содержать любое количество слайдов, включая одну, что по сути эквивалентно обычной вертикальной секции.

Инициализация слайдов

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

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

Ключевые параметры для слайдов:

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

Управление слайдами через API

FullPage.js предоставляет мощный API для управления слайдами программно. Основные методы:

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

Пример:

document.querySelector('#nextSlide').addEventListener('click', () => {
  fullpage_api.moveSlideRight();
});

document.querySelector('#prevSlide').addEventListener('click', () => {
  fullpage_api.moveSlideLeft();
});

Настройка переходов и эффектов

Слайды поддерживают CSS-анимации и плавные переходы. Основной способ настройки — через опции css3, easing и easingcss3:

new fullpage('#fullpage', {
  css3: true,
  easing: 'easeInOutCubic',
  easingcss3: 'ease',
  controlArrows: true
});
  • css3: true — позволяет использовать GPU-анимацию для плавных сдвигов.
  • easing — управление JS-анимацией.
  • easingcss3 — управление CSS-анимацией при поддержке CSS3.

Адаптивное поведение слайдов

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

new fullpage('#fullpage', {
  slidesNavigation: true,
  responsiveWidth: 768,
  responsiveHeight: 600
});
  • При ширине экрана меньше 768px fullPage.js автоматически отключает горизонтальные слайды.
  • Это позволяет улучшить UX на небольших экранах, где горизонтальные слайды могут быть неудобны.

Динамическое добавление слайдов

Слайды можно добавлять и удалять динамически с помощью API:

  • fullpage_api.addSlide(section, slideContent, index) — добавляет слайд в указанную секцию.
  • fullpage_api.removeSlide(section, index) — удаляет слайд по индексу.

Пример добавления нового слайда:

fullpage_api.addSlide(0, '<div class="slide">Новый слайд</div>');

Навигация по слайдам с клавиатуры и сенсорными событиями

FullPage.js автоматически поддерживает:

  • Стрелки клавиатуры (ArrowLeft, ArrowRight) для перемещения между слайдами.
  • Свайпы на мобильных устройствах для горизонтальных слайдов.

Для более тонкой настройки можно использовать события API:

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

Важные нюансы

  • Горизонтальные слайды всегда находятся внутри одной секции; вертикальная навигация перемещает между секциями.
  • Если секция содержит только один слайд, горизонтальная навигация отключается автоматически.
  • Для сложных макетов внутри слайдов рекомендуется использовать flexbox или grid, чтобы сохранить адаптивность.

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

Оглавление