Стрелки навигации

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

Включение стрелок навигации

Чтобы активировать стрелки навигации, в конфигурации fullPage.js используется опция navigation и связанная с ней controlArrows:

new fullpage('#fullpage', {
    navigation: true,       // Показывает навигационные точки справа
    controlArrows: true     // Включает стрелки для слайдов
});
  • navigation: true создаёт точки навигации справа страницы, которые позволяют переходить к секции напрямую.
  • controlArrows: true отображает стрелки навигации на слайдах внутри каждой секции, если используется горизонтальная прокрутка (slides).

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

Стрелки можно стилизовать через CSS, используя стандартные классы fullPage.js:

.fp-controlArrow {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.fp-controlArrow.fp-prev {
    left: 10px;
}

.fp-controlArrow.fp-next {
    right: 10px;
}
  • .fp-prev — стрелка для перехода назад.
  • .fp-next — стрелка для перехода вперед.
  • Стрелки автоматически позиционируются по центру вертикали слайдов.

Горизонтальная навигация и стрелки

Если секции содержат горизонтальные слайды (.slide), стрелки управления становятся особенно полезными. По умолчанию fullPage.js скрывает стрелки, если горизонтальных слайдов меньше двух, чтобы не загромождать интерфейс.

Пример секции с горизонтальными слайдами:

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
    <div class="slide">Слайд 3</div>
</div>

Стрелки навигации (controlArrows) позволят переходить между слайдами внутри одной секции, не влияя на вертикальную прокрутку.

Управление стрелками через API

FullPage.js предоставляет методы для программного управления стрелками:

// Переход к следующему слайду
fullpage_api.moveSlideRight();

// Переход к предыдущему слайду
fullpage_api.moveSlideLeft();

Эти методы полезны, если требуется создать собственные кнопки управления, вместо стандартных стрелок.

Настройка скрытия и показа стрелок

Стрелки можно динамически показывать или скрывать в зависимости от положения слайдов:

new fullpage('#fullpage', {
    controlArrows: true,
    afterSlideLoad: function(section, origin, destination, direction){
        const prevArrow = document.querySelector('.fp-prev');
        const nextArrow = document.querySelector('.fp-next');

        prevArrow.style.display = destination.index === 0 ? 'none' : 'block';
        nextArrow.style.display = destination.index === section.slides.length - 1 ? 'none' : 'block';
    }
});
  • afterSlideLoad вызывается после загрузки слайда.
  • Стрелка влево скрывается на первом слайде, стрелка вправо — на последнем.

Пользовательские стрелки

Можно полностью заменить стандартные стрелки на собственные элементы:

new fullpage('#fullpage', {
    controlArrows: false, // Отключаем стандартные стрелки
});

document.querySelector('#customPrev').addEventListener('click', () => {
    fullpage_api.moveSlideLeft();
});

document.querySelector('#customNext').addEventListener('click', () => {
    fullpage_api.moveSlideRight();
});
  • Позволяет использовать любую графику или анимацию.
  • Совместимо с адаптивными макетами и кастомным дизайном.

Интерактивные эффекты и анимации

Стрелки можно анимировать, чтобы они реагировали на наведение курсора или активные слайды:

.fp-controlArrow:hover {
    transform: translateY(-50%) scale(1.2);
    transition: transform 0.3s ease;
}
  • Улучшает визуальное восприятие.
  • Делает навигацию более заметной и интерактивной.

Ограничение навигации стрелками

Для некоторых интерфейсов может потребоваться блокировка стрелок на определённых слайдах:

afterSlideLoad: function(section, origin, destination, direction){
    if(destination.index === 2){
        document.querySelector('.fp-next').style.pointerEvents = 'none';
        document.querySelector('.fp-next').style.opacity = '0.3';
    } else {
        document.querySelector('.fp-next').style.pointerEvents = 'auto';
        document.querySelector('.fp-next').style.opacity = '1';
    }
}
  • Позволяет контролировать доступ к определённым слайдам.
  • Совместимо с анимациями и пользовательскими стрелками.

Резюме ключевых моментов

  • controlArrows: true активирует стрелки для горизонтальных слайдов.
  • CSS-классы .fp-controlArrow, .fp-prev, .fp-next позволяют кастомизировать внешний вид.
  • API методы moveSlideLeft и moveSlideRight обеспечивают полный контроль над навигацией.
  • После загрузки слайда (afterSlideLoad) можно динамически изменять отображение и поведение стрелок.
  • Возможна полная замена стандартных стрелок на пользовательские элементы.

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

Оглавление