Структура слайдов

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

Основной контейнер

Вся страница должна быть обернута в главный контейнер с классом:

<div id="fullpage">
    <!-- Секции и слайды -->
</div>
  • id="fullpage" — стандартное обозначение контейнера, который инициализируется через JavaScript.
  • Внутри контейнера размещаются секции, которые представляют вертикальные блоки.

Секции

Секция — это основной вертикальный блок. Она обозначается классом section:

<div class="section">
    <h1>Секция 1</h1>
</div>
<div class="section">
    <h1>Секция 2</h1>
</div>

Особенности секций:

  • Каждая секция занимает всю высоту окна браузера.
  • Секции располагаются друг под другом, формируя вертикальную структуру страницы.
  • Для добавления цвета фона или стиля каждой секции удобно использовать отдельные классы или атрибуты data-*.

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

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

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

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

  • Горизонтальные слайды должны быть вложены непосредственно в секцию.
  • Навигация между слайдами осуществляется с помощью стрелок, свайпов или программного вызова через API.
  • Можно комбинировать горизонтальные слайды и вертикальные секции: секции перемещаются по вертикали, а слайды — по горизонтали.

Атрибуты для настройки секций и слайдов

FullPage.js поддерживает использование data-атрибутов для настройки каждой секции и слайда:

  • data-anchor — задаёт уникальный идентификатор для навигации через URL.
  • data-menuanchor — связывает секцию с элементом меню.
  • data-background-color — позволяет задать цвет фона без дополнительного CSS.
  • data-easing и data-speed — влияют на плавность переходов.

Пример:

<div class="section" data-anchor="about" data-background-color="#ff5733">
    <div class="slide" data-anchor="slide1">Первый слайд</div>
    <div class="slide" data-anchor="slide2">Второй слайд</div>
</div>

Вложенные структуры

Полезно создавать сложные структуры, сочетая вертикальные и горизонтальные элементы. При этом:

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

Обязательные классы для CSS и JS

  • .section — вертикальная секция.
  • .slide — горизонтальный слайд.
  • .fp-table — добавляется автоматически для центрального выравнивания.
  • .fp-slides — обёртка для горизонтальных слайдов, создаётся автоматически при инициализации.

Пример полной структуры страницы

<div id="fullpage">
    <div class="section" data-anchor="home">
        <h1>Главная секция</h1>
    </div>
    <div class="section" data-anchor="portfolio">
        <div class="slide" data-anchor="project1">Проект 1</div>
        <div class="slide" data-anchor="project2">Проект 2</div>
        <div class="slide" data-anchor="project3">Проект 3</div>
    </div>
    <div class="section" data-anchor="contact">
        <h1>Контакты</h1>
    </div>
</div>

В этом примере:

  • Первая и третья секции — одиночные вертикальные блоки.
  • Вторая секция содержит горизонтальные слайды.
  • Используются data-anchor для URL-навигации и удобства работы с меню.

Советы по организации слайдов

  1. Всегда проверять правильность вложенности: секция → слайд.
  2. Разделять секции и слайды логически по смыслу страницы.
  3. Использовать data-атрибуты для упрощения навигации и стилизации.
  4. Минимизировать количество вложенных элементов внутри секций, чтобы не перегружать DOM.
  5. Планировать вертикальные секции для больших блоков контента, а горизонтальные слайды для галерей, презентаций или шагов.

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

Оглавление