Проверка корректности установки

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

Подключение файлов библиотеки

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.2/fullpage.min.css" />

JavaScript отвечает за поведение и управление функционалом:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.2/fullpage.min.js"></script>

Важно убедиться, что версия CSS и JS совпадает. Несовпадение версий часто вызывает ошибки в работе скриптов.

Создание базовой HTML-структуры

FullPage.js требует специфической структуры документа: каждая «страница» представлена отдельной секцией с классом section.

Пример базового HTML:

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

Инициализация fullPage.js

После подключения файлов и создания структуры необходимо инициализировать плагин. Инициализация выполняется через конструктор new fullpage() с передачей идентификатора контейнера и опций:

document.addEventListener('DOMContentLoaded', () => {
  new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
  });
});

Ключевые параметры:

  • autoScrolling — включает автоматический скролл по секциям.
  • navigation — отображает навигационные точки справа.
  • anchors — задаёт якоря для ссылок на секции.
  • sectionsColor — фоновые цвета для каждой секции, полезны для визуальной проверки.

Если при инициализации появляются ошибки в консоли, необходимо проверить:

  • Наличие элемента с указанным идентификатором (#fullpage).
  • Корректность подключения JS и CSS.
  • Совпадение версии библиотек.

Проверка базового функционала

После инициализации следует убедиться, что:

  1. Скролл между секциями работает плавно.
  2. Навигационные точки появляются и корректно реагируют на клики.
  3. Фоновый цвет секций соответствует заданному.
  4. Якоря позволяют переходить по URL напрямую к секции (example.com/#secondPage).

Если хотя бы один из пунктов не работает, необходимо:

  • Проверить порядок подключения скриптов: fullPage.js должен быть подключён после всех зависимостей и DOM-элементов.
  • Проверить совместимость с другими библиотеками, особенно с jQuery, если проект её использует.
  • Убедиться, что контейнер #fullpage не имеет внешних CSS-ограничений по высоте или overflow, которые могут блокировать скролл.

Использование консоли для диагностики

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

  • fullpage is not defined — скрипт не подключён или подключён после инициализации.
  • Cannot read property 'style' of null — элемент контейнера отсутствует в момент вызова.
  • Проблемы с переходами и навигацией — конфликт CSS или некорректные классы.

Тестирование с дополнительными опциями

Для окончательной проверки установки рекомендуется включить несколько дополнительных опций:

new fullpage('#fullpage', {
  autoScrolling: true,
  scrollHorizontally: true,
  navigation: true,
  controlArrows: true,
  fitToSection: true,
});
  • scrollHorizontally — проверяет работу горизонтального скролла для слайдов.
  • controlArrows — проверяет отображение стрелок для слайдов.
  • fitToSection — проверяет корректное выравнивание секций по высоте экрана.

Если все функции работают корректно, установка fullPage.js завершена успешно.

Оглавление