onSlideLeave

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

new fullpage('#fullpage', {
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    slidesNavigation: true,
    onSlideLeave: function(section, origin, destination, direction){
        console.log('Текущий слайд:', origin.index);
        console.log('Следующий слайд:', destination.index);
        console.log('Направление:', direction);
    }
});

Параметры колбека onSlideLeave

Колбек onSlideLeave принимает четыре параметра, каждый из которых предоставляет подробную информацию о происходящей смене слайдов:

  1. section – объект секции, в которой происходит смена слайда. Содержит информацию о текущей секции, её индекс, DOM-элемент и дочерние слайды.

    • section.index – порядковый номер секции.
    • section.item – DOM-элемент секции.

  2. origin – объект слайда, с которого осуществляется уход.

    • origin.index – индекс текущего слайда.
    • origin.item – DOM-элемент текущего слайда.

  3. destination – объект слайда, на который осуществляется переход.

    • destination.index – индекс целевого слайда.
    • destination.item – DOM-элемент целевого слайда.

  4. direction – направление перехода ('left' или 'right'). Это позволяет выполнять различные действия в зависимости от того, движется пользователь вперед или назад.

Основные сценарии использования

  1. Анимация контента при смене слайда
onSlideLeave: function(section, origin, destination, direction){
    origin.item.querySelector('.slide-content').classList.remove('active');
    destination.item.querySelector('.slide-content').classList.add('active');
}

Позволяет скрывать элементы текущего слайда и активировать анимацию на следующем.

  1. Отслеживание статистики или аналитики
onSlideLeave: function(section, origin, destination, direction){
    console.log(`Пользователь покинул слайд ${origin.index} и перешел на ${destination.index}`);
    // Можно отправлять данные в аналитические сервисы
}

Применяется для сбора информации о взаимодействии пользователя с сайтом.

  1. Управление навигацией или динамическим контентом
onSlideLeave: function(section, origin, destination, direction){
    if(destination.index === 2 && section.index === 1){
        loadDynamicContent(destination.item);
    }
}

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

Взаимодействие с другими событиями

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

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

  • Синхронизация анимаций: Для плавных переходов рекомендуется запускать CSS-анимации с помощью классов и использовать transitionend для точной синхронизации.
  • Отмена перехода: Библиотека не предоставляет прямого метода отмены перехода внутри onSlideLeave, но можно использовать проверку условий и управлять содержимым слайдов до анимации.
  • Совместимость с lazy-load: При динамической подгрузке изображений или контента рекомендуется инициализировать загрузку в onSlideLeave, чтобы избежать задержек и некорректного отображения слайдов.

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

new fullpage('#fullpage', {
    sectionsColor: ['#282c34', '#ff5f45', '#0798ec'],
    slidesNavigation: true,
    onSlideLeave: function(section, origin, destination, direction){
        // Деактивация текущего слайда
        origin.item.classList.remove('active-slide');
        // Активация следующего слайда
        destination.item.classList.add('active-slide');
        // Запуск кастомной функции при переходе вправо
        if(direction === 'right'){
            animateSlideContent(destination.item);
        }
        // Логирование для отладки
        console.log(`Смена слайда ${origin.index} → ${destination.index}, направление: ${direction}`);
    }
});

Этот пример показывает полное управление поведением слайдов: активация/деактивация, запуск анимаций и аналитическое отслеживание переходов.

onSlideLeave — мощный инструмент для управления горизонтальными слайдами, позволяющий создавать динамичные, интерактивные интерфейсы, синхронизировать контент и расширять стандартные возможности fullPage.js.

Оглавление