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

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

<div id="fullpage">
  <div class="section">Первая секция</div>
  <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 — горизонтальные слайды внутри секции.
  • Слайды отображаются только внутри секций, не могут существовать отдельно.

Инициализация производится через new fullpage() с конфигурацией:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    controlArrows: true,
    slidesNavigation: true,
    loopHorizontal: false
});

Горизонтальная навигация между слайдами

fullPage.js поддерживает горизонтальное перелистывание слайдов внутри секции:

  • Переход к следующему слайду:
fullpage_api.moveSlideRight();
  • Переход к предыдущему слайду:
fullpage_api.moveSlideLeft();
  • Переход к определённому слайду по индексу:
fullpage_api.moveTo(sectionIndex, slideIndex);

Где sectionIndex — номер секции (начинается с 1), slideIndex — номер слайда внутри секции (начинается с 0).

Автоматическое переключение слайдов

Для создания автоматической карусели можно использовать таймер и метод moveSlideRight():

setInterval(() => {
    const activeSection = fullpage_api.getActiveSection();
    const slides = activeSection.slides.length;
    const activeSlide = fullpage_api.getActiveSlide().index;
    
    if (activeSlide < slides - 1) {
        fullpage_api.moveSlideRight();
    } else {
        fullpage_api.moveTo(activeSection.index + 1, 0);
    }
}, 5000);

Особенности:

  • Автопереключение учитывает последнюю секцию.
  • Возможна настройка скорости через CSS-анимацию или конфигурацию scrollingSpeed.

Настройка стрелок и навигации

Стрелки для слайдов управляются опцией controlArrows при инициализации. Можно кастомизировать стрелки с помощью CSS:

.fp-controlArrow.fp-prev {
    background-image: url('arrow-left.svg');
}
.fp-controlArrow.fp-next {
    background-image: url('arrow-right.svg');
}

Для управления нижней навигацией (точки для слайдов) используется slidesNavigation:

new fullpage('#fullpage', {
    slidesNavigation: true,
    slidesNavPosition: 'bottom'
});

Программное управление слайдами через события

fullPage.js предоставляет API для отслеживания и управления слайдами:

  • Событие при смене слайда:
afterSlideLoad: function(section, origin, destination, direction){
    console.log(`Секция: ${section.index}, Слайд: ${destination.index}`);
}
  • Событие перед сменой слайда:
onSlideLeave: function(section, origin, destination, direction){
    console.log(`Покидаем слайд ${origin.index}, идём на ${destination.index}`);
}

Эти события позволяют:

  • Запуск анимаций при смене слайда.
  • Подгрузку контента динамически.
  • Синхронизацию с внешними элементами интерфейса.

Настройка цикличности и ограничений

Опции loopHorizontal и loopBottom управляют цикличностью слайдов и секций:

new fullpage('#fullpage', {
    loopHorizontal: true, // позволяет перелистывать слайды по кругу
    loopBottom: true      // позволяет переходить с последней секции на первую
});

Для каждой секции можно индивидуально задавать свойства:

<div class="section" data-loop-h="true">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
</div>

fullPage.js автоматически распознаёт атрибут data-loop-h и применяет настройки.

Доступ к текущему слайду и секции

Для динамического управления и отладки можно получить активные элементы:

const activeSection = fullpage_api.getActiveSection();
const activeSlide = fullpage_api.getActiveSlide();

console.log(activeSection.index); // Индекс секции
console.log(activeSlide.index);   // Индекс слайда

Также доступен массив всех слайдов в секции:

const slides = activeSection.slides;
slides.forEach(slide => console.log(slide.item));

Анимации и переходы между слайдами

fullPage.js поддерживает CSS-анимации для слайдов. Рекомендуется использовать классы .active и .fp-completely:

.section .slide {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.section .slide.active {
    opacity: 1;
}

События afterSlideLoad и onSlideLeave позволяют добавлять или удалять анимации динамически.

Сводка методов управления слайдами

Метод Описание
moveSlideRight() Перейти к следующему слайду
moveSlideLeft() Перейти к предыдущему слайду
moveTo(sectionIndex, slideIndex) Перейти к конкретной секции и слайду
getActiveSection() Получить текущую секцию
getActiveSlide() Получить текущий слайд
afterSlideLoad Событие после загрузки слайда
onSlideLeave Событие при уходе со слайда

Эта функциональность позволяет строить полноценные горизонтальные карусели, слайдеры внутри секций и сложные анимационные эффекты с программным управлением.

Оглавление