Базовая структура HTML

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

Контейнер fullPage.js

Основной контейнер обёртывает все секции и задаётся с помощью <div> с уникальным идентификатором или классом. Обычно используется id="fullpage":

<div id="fullpage">
    <!-- Секции будут размещаться здесь -->
</div>
  • id или класс: уникальный идентификатор позволяет инициализировать fullPage.js через JavaScript.
  • ограничение: все секции должны быть прямыми потомками этого контейнера.

Секции

Каждая секция представляет собой экранное окно, которое пользователь видит при прокрутке. Секция создаётся с помощью элемента <div> и класса section:

<div class="section">
    <h1>Первая секция</h1>
</div>
<div class="section">
    <h1>Вторая секция</h1>
</div>
  • Класс section является обязательным для работы библиотеки.
  • Контент секции может включать любой HTML: текст, изображения, видео, формы и т.д.
  • Размер секции автоматически подстраивается под высоту окна браузера.

Горизонтальные слайды

Если внутри секции требуется горизонтальная прокрутка, используется контейнер slide внутри секции:

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
    <div class="slide">Слайд 3</div>
</div>
  • Класс slide обязателен для каждого слайда.
  • Слайды располагаются горизонтально и переключаются внутри одной секции.
  • Для секции с слайдами рекомендуется использовать контейнер <div class="section"> без дополнительных обёрток между секцией и слайдами.

Опциональные атрибуты

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

  1. data-anchor – задаёт уникальный идентификатор секции для навигации по URL:
<div class="section" data-anchor="home">
    <h1>Главная секция</h1>
</div>
  1. data-tooltip – текст подсказки для навигационных маркеров (точек):
<div class="section" data-tooltip="О компании">
    <h1>Секция о компании</h1>
</div>
  1. active – динамически присваивается библиотекой активной секции или слайду. Этот класс можно использовать для стилизации через CSS.

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

<div id="fullpage">
    <div class="section" data-anchor="first">
        <h1>Секция 1</h1>
    </div>
    <div class="section" data-anchor="second">
        <div class="slide">Слайд 1</div>
        <div class="slide">Слайд 2</div>
    </div>
    <div class="section" data-anchor="third">
        <h1>Секция 3</h1>
    </div>
</div>
  • Первая и третья секции содержат обычный контент.
  • Вторая секция содержит горизонтальные слайды.
  • data-anchor облегчает создание навигации и управление URL.

Важные нюансы структуры

  • Секции должны быть не вложенными друг в друга (кроме слайдов внутри секций).
  • Для корректной работы слайдов нельзя добавлять промежуточные обёртки между .section и .slide.
  • Контейнер fullPage.js не должен иметь margin и padding, иначе возможны ошибки позиционирования.

Рекомендации по стилям

Для базового отображения рекомендуется задать секциям 100% высоты окна через CSS, хотя fullPage.js автоматически это делает:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.section {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
  • Flexbox обеспечивает вертикальное и горизонтальное центрирование контента.
  • Полная высота секций гарантирует плавную прокрутку и корректное отображение на всех устройствах.

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

Оглавление