Метод moveSlideLeft

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

Синтаксис

fullpage_api.moveSlideLeft();
  • fullpage_api — глобальный объект, который создаётся при инициализации fullPage.js.
  • Метод не принимает аргументов.
  • Выполняет переход на левый слайд в пределах текущей активной секции.

Основные особенности

  1. Работа только внутри слайдов

    • Метод действует только если текущая секция содержит несколько слайдов (.fp-slides и .fp-slide).
    • Если активная секция состоит из одного слайда, вызов метода не будет иметь эффекта.

  2. Циклический переход

    • Если включена опция loopHorizontal: true, при достижении первого слайда метод перемещает пользователя на последний слайд.
    • Без включенной опции переход за пределы первой позиции блокируется.

  3. Анимация и скорость

    • Переход выполняется с анимацией, аналогичной стандартной навигации стрелками.
    • Скорость анимации управляется через опцию controlArrows и общие настройки анимации (scrollingSpeed).

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

new fullpage('#fullpage', {
    licenseKey: 'YOUR_KEY_HERE',
    autoScrolling: true,
    navigation: true,
    loopHorizontal: true
});

// Перемещение на предыдущий слайд при нажатии кнопки
document.getElementById('prevSlide').addEventListener('click', function() {
    fullpage_api.moveSlideLeft();
});
  • В данном примере метод moveSlideLeft вызывается при клике на кнопку с id="prevSlide".
  • Настройка loopHorizontal: true обеспечивает бесконечную горизонтальную прокрутку.

Сценарии применения

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

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

  • moveSlideRight() — противоположный метод, переход к следующему слайду.
  • moveTo(section, slide) — позволяет перейти к любому слайду по индексу.
  • getActiveSlide() — получение текущего активного слайда, полезно для логики переключения.
let activeSlide = fullpage_api.getActiveSlide();
console.log(activeSlide.index); // индекс текущего слайда
  • Метод moveSlideLeft можно комбинировать с проверкой активного слайда, чтобы реализовать условную навигацию или динамическую загрузку контента.

Ограничения и рекомендации

  1. Метод не работает с вертикальными переходами между секциями. Для них используется moveSectionUp или moveSectionDown.
  2. В случае динамического изменения количества слайдов рекомендуется вызывать метод update() после добавления или удаления слайдов, чтобы fullPage.js корректно пересчитал структуру.
  3. Для плавной интеграции с кастомными кнопками важно отключать стандартные стрелки (controlArrows: false) и самостоятельно управлять навигацией через moveSlideLeft и moveSlideRight.

Советы по оптимизации

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

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

Оглавление