afterSlideLoad

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

Сигнатура и параметры

Функция-обработчик afterSlideLoad принимает четыре параметра:

afterSlideLoad: function(section, origin, destination, direction){
    // Ваш код
}

  • section — объект секции, в которой находится слайд. Содержит свойства:

    • section.index — индекс секции (от 0);
    • section.anchor — якорь секции, если он задан;
    • section.item — DOM-элемент секции.

  • origin — объект предыдущего слайда (с которого был переход), либо null, если пользователь начал с текущего слайда. Содержит аналогичные свойства:

    • origin.index;
    • origin.anchor;
    • origin.item.

  • destination — объект текущего слайда (куда выполнен переход). Свойства:

    • destination.index;
    • destination.anchor;
    • destination.item.

  • direction — строка, указывающая направление перехода: 'left' или 'right'.

Использование

Основное назначение события — выполнение действий после завершения анимации слайда, например:

  • запуск анимаций внутри слайда;
  • подгрузка данных или изображений;
  • отслеживание статистики или аналитики.

Пример базового использования:

new fullpage('#fullpage', {
    slidesNavigation: true,
    afterSlideLoad: function(section, origin, destination, direction){
        console.log('Переход завершён');
        console.log('Текущая секция:', section.index);
        console.log('Текущий слайд:', destination.index);
        if(destination.index === 2){
            // Запуск анимации для третьего слайда
            destination.item.querySelector('.animate').classList.add('active');
        }
    }
});

В этом примере при переходе к третьему слайду внутри секции добавляется класс .active для запуска CSS-анимации.

Практические примеры применения

  1. Запуск видео или аудио:
afterSlideLoad: function(section, origin, destination, direction){
    const video = destination.item.querySelector('video');
    if(video){
        video.play();
    }
}

Видео начнёт воспроизводиться только после того, как слайд полностью загрузился и виден пользователю.

  1. Подгрузка контента динамически:
afterSlideLoad: function(section, origin, destination, direction){
    if(!destination.item.dataset.loaded){
        fetch('/api/content/' + destination.index)
            .then(res => res.text())
            .then(html => {
                destination.item.innerHTML = html;
                destination.item.dataset.loaded = 'true';
            });
    }
}

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

  1. Изменение стилей интерфейса в зависимости от слайда:
afterSlideLoad: function(section, origin, destination, direction){
    const header = document.querySelector('header');
    if(destination.index % 2 === 0){
        header.style.backgroundColor = '#333';
    } else {
        header.style.backgroundColor = '#fff';
    }
}

Событие позволяет адаптировать внешний вид сайта под конкретный слайд.

Отличие от onSlideLeave

  • onSlideLeave срабатывает перед началом перехода, что удобно для очистки состояний, остановки анимаций или прерывания видео.
  • afterSlideLoad срабатывает после завершения перехода, когда слайд полностью отрисован и видим. Это критично для анимаций, которые должны начинаться только после окончания движения.

Пример сочетания:

onSlideLeave: function(section, origin, destination, direction){
    origin.item.querySelector('video')?.pause();
},
afterSlideLoad: function(section, origin, destination, direction){
    destination.item.querySelector('video')?.play();
}

Особенности и рекомендации

  • Если секция содержит несколько слайдов, afterSlideLoad вызывается каждый раз при переходе между ними.
  • При использовании якорей (anchors) событие срабатывает корректно, даже если переход был выполнен через URL (#section3/slide2).
  • Для оптимизации производительности стоит избегать тяжелых операций внутри обработчика. Для сложных анимаций лучше использовать requestAnimationFrame или сторонние библиотеки анимации.

Доступ к DOM элементов слайда

Свойство destination.item предоставляет чистый DOM-элемент слайда, что позволяет:

  • добавлять или удалять классы;
  • изменять стили;
  • запускать скрипты внутри конкретного слайда.

Пример с анимацией нескольких элементов:

afterSlideLoad: function(section, origin, destination, direction){
    const elements = destination.item.querySelectorAll('.fade-in');
    elements.forEach((el, i) => {
        setTimeout(() => {
            el.classList.add('visible');
        }, i * 200);
    });
}

Здесь элементы с классом .fade-in появляются последовательно с задержкой.

Совместимость и версия

  • Событие afterSlideLoad доступно начиная с fullPage.js версии 3.x.
  • Для правильной работы необходимо убедиться, что слайдер инициализирован с поддержкой горизонтальных слайдов (slidesNavigation или scrollHorizontally по необходимости).

Событие afterSlideLoad обеспечивает точный контроль над состоянием слайдов и позволяет реализовать сложные интерактивные интерфейсы без лишних задержек и мерцаний контента. Оно идеально подходит для запуска анимаций, динамической подгрузки данных и управления мультимедиа после завершения перехода.

Оглавление