Модули: Navigation
Свойства, методы и события модуля Navigation для Swiper.js.
Navigation
Кнопки назад / вперёд слайдера Swiper.js.
Параметры Navigation
disabledClass
stringswiper-button-disabledОписание
Имя CSS класса, добавляемое к кнопкам навигации в процессе выключения.
enabled
booleanнетОписание
Логическое свойство, используемое с брейкпоинтами для включения/отключения навигации для определённых разрешений экрана.
hiddenClass
stringswiper-button-hiddenОписание
Имя CSS класса, добавляемое к кнопкам навигации, когда они становятся скрытыми.
hideOnClick
booleanfalseОписание
Переключает видимость кнопок навигации после нажатия на контейнер слайдера.
lockClass
stringswiper-button-lockОписание
Название класса CSS добавляется к кнопке навигации, когда она уже в отключённом состоянии.
navigationDisabledClass
stringswiper-navigation-disabledОписание
Имя CSS-класса добавляется к контейнеру Swiper, когда навигация отключена с помощью брейкпоинта (не попадает в нужное разрешение экрана).
nextEl
anynullОписание
HTML Element или CSS-селектор элемента, который будет работать как кнопка "далее" по клику на нее.
prevEl
anynullОписание
HTML Element или CSS-селектор элемента, который будет работать как кнопка "назад" по клику на нее.
Методы Navigation
Свойства
swiper.nextEl
HTMLElementОписание
HTMLElement кнопки "вперёд" навигации.
swiper.prevEl
HTMLElementОписание
HTMLElement кнопки "назад" навигации.
Методы
swiper.destroy()
нетОписание
Уничтожение объекта навигации.
swiper.init()
нетОписание
Инициализация навигации.
swiper.update()
нетОписание
Обновление состояния кнопок навигации (включены / выключены).
События Navigation
navigationHide
(swiper)Описание
Событие вызывается в момент скрытия навигации.
navigationNext
(swiper)Описание
Событие вызывается в при клике на кнопку "вперёд".
navigationPrev
(swiper)Описание
Событие вызывается при клике на кнопку "назад".
navigationShow
(swiper)Описание
Событие вызывается в момент включения видимости навигации.
CSS-переменные Navigation Swiper.js
{
--swiper-navigation-size: 44px;
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color);
}