Установка через CDN

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

Подключение CSS

fullPage.js требует подключения стилей для корректного отображения секций и анимаций. Для этого используется файл fullpage.min.css. Его подключение выполняется в <head> HTML-документа:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.11/fullpage.min.css" integrity="sha512-G8Yy9TcmV+T+0k8G3fR3r0/6kNhD7V0Zs1K3gN5H+g6Fj2nJXkxIh5rU4g4i0lD5sV8KqU6L5yQ2oF+v5u7XAA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

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

  • rel="stylesheet" — стандартное подключение CSS.
  • Атрибут integrity обеспечивает проверку целостности загружаемого файла.
  • crossorigin="anonymous" необходим для корректной работы integrity при загрузке с CDN.
  • referrerpolicy="no-referrer" предотвращает передачу информации о странице, с которой выполняется запрос.

Подключение JavaScript

Основной функционал fullPage.js реализован в JS-файле fullpage.min.js. Его подключение обычно выполняется перед закрывающим тегом </body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.11/fullpage.min.js" integrity="sha512-pNk1mQGp6Ns6pYKxU3F4XW3I3L1PbbdC8pGL6AqG2J0H0tGxT0R+g2yqUwA3v7Hk5w2qKHvQ7Z2sKkG9yYbG2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Особенности подключения через CDN:

  • Последовательность подключения важна: сначала CSS, затем JS.
  • Версии файлов необходимо синхронизировать, чтобы избежать конфликтов между стилями и скриптами.
  • integrity и crossorigin повышают безопасность и предотвращают подмену библиотек.

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

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

<script>
  document.addEventListener('DOMContentLoaded', function() {
    new fullpage('#fullpage', {
      autoScrolling: true,
      navigation: true,
      scrollHorizontally: true
    });
  });
</script>

Объяснение параметров:

  • #fullpage — идентификатор контейнера, который содержит все секции.
  • autoScrolling: true — включает автоматическую прокрутку между секциями.
  • navigation: true — добавляет навигационные точки справа страницы.
  • scrollHorizontally: true — активирует горизонтальную прокрутку внутри секций (требует дополнительно подключения scrollHorizontally.min.js, если используется).

HTML-разметка секций

Контейнер с идентификатором #fullpage должен содержать блоки .section для каждой страницы:

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

Важные правила:

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

Использование последних версий с CDN

CDN обеспечивает возможность указать конкретную версию библиотеки, например:

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.11/fullpage.min.js

Это важно для совместимости с существующим проектом. Если версия не указана, может загрузиться последняя, что иногда вызывает ошибки при несовместимости с вашим кодом.

Дополнительные рекомендации

  • Проверять совместимость с другими библиотеками, особенно с jQuery. fullPage.js версии 4 и выше не требуют jQuery.
  • Использовать DOMContentLoaded или defer при подключении скрипта, чтобы библиотека инициализировалась после загрузки HTML.
  • Для мобильных устройств можно включать адаптивные настройки, например responsiveWidth и responsiveHeight.

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

Оглавление