Метод moveSlideRight

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

Синтаксис

fullpage_api.moveSlideRight();
  • fullpage_api — объект, создаваемый при инициализации fullPage.js.
  • moveSlideRight() — метод без параметров. Перемещает текущий активный слайд вправо на один.

Особенности работы

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

  2. Совместимость с анимацией Перемещение выполняется с плавной анимацией, соответствующей настройкам css3 и scrollingSpeed. Можно контролировать скорость перехода с помощью параметра scrollingSpeed при инициализации fullPage.js.

  3. Работа в рамках текущей секции Метод перемещает только по горизонтали внутри активной секции. Для перехода между вертикальными секциями используются другие методы (moveSectionDown, moveSectionUp).

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

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    loopHorizontal: true,
    scrollingSpeed: 700
});

// Переход к следующему слайду в активной секции
document.querySelector('#nextSlideButton').addEventListener('click', function() {
    fullpage_api.moveSlideRight();
});

В данном примере при нажатии на кнопку срабатывает метод moveSlideRight, а библиотека плавно прокручивает слайд вправо. Если активный слайд был последним, при включенной опции loopHorizontal возвращается первый слайд.

Взаимодействие с колбэками

Метод moveSlideRight активирует стандартные события fullPage.js, что позволяет использовать колбэки:

  • onSlideLeave — срабатывает перед сменой слайда.
  • afterSlideLoad — срабатывает после завершения перехода на новый слайд.

Пример:

new fullpage('#fullpage', {
    onSlideLeave: function(section, origin, destination, direction){
        console.log('Слайд покидает позицию:', origin.index);
    },
    afterSlideLoad: function(section, origin, destination, direction){
        console.log('Текущий активный слайд:', destination.index);
    }
});

Вызов moveSlideRight() автоматически инициирует эти события, обеспечивая возможность отслеживания навигации и выполнения дополнительных действий.

Ограничения и нюансы

  1. Метод не работает, если секция не содержит слайдов.
  2. В случае динамического добавления слайдов после инициализации fullPage.js необходимо использовать метод update:
fullpage_api.update();
  1. Если активный слайд скрыт через CSS или имеет display: none, метод может вести себя непредсказуемо, так как fullPage.js рассчитывает позиции видимых элементов.

Практические советы

  • Для циклической карусели внутри секции рекомендуется включать loopHorizontal: true.
  • Если требуется синхронизировать внешний контент с перемещением слайдов, использовать колбэки onSlideLeave и afterSlideLoad.
  • Для динамически генерируемых слайдов после загрузки страницы вызывать fullpage_api.update() для корректного распознавания новых слайдов.

Альтернативные методы навигации

  • moveSlideLeft() — перемещает активный слайд влево.
  • silentMoveTo(sectionIndex, slideIndex) — мгновенный переход к конкретному слайду без анимации.
  • moveTo(sectionIndex, slideIndex) — переход к конкретной секции и слайду с анимацией.

Использование moveSlideRight удобно для автоматических каруселей и интерактивных интерфейсов с горизонтальной навигацией внутри секций.

Оглавление