Модули: Navigation
Свойства, методы и события модуля Navigation для Swiper.js.
Navigation
Кнопки назад / вперёд слайдера Swiper.js.
Параметры Navigation
disabledClass
string
swiper-button-disabled
Описание
Имя CSS класса, добавляемое к кнопкам навигации в процессе выключения.
enabled
boolean
нет
Описание
Логическое свойство, используемое с брейкпоинтами для включения/отключения навигации для определённых разрешений экрана.
hiddenClass
string
swiper-button-hidden
Описание
Имя CSS класса, добавляемое к кнопкам навигации, когда они становятся скрытыми.
hideOnClick
boolean
false
Описание
Переключает видимость кнопок навигации после нажатия на контейнер слайдера.
lockClass
string
swiper-button-lock
Описание
Название класса CSS добавляется к кнопке навигации, когда она уже в отключённом состоянии.
navigationDisabledClass
string
swiper-navigation-disabled
Описание
Имя CSS-класса добавляется к контейнеру Swiper, когда навигация отключена с помощью брейкпоинта (не попадает в нужное разрешение экрана).
nextEl
any
null
Описание
HTML Element или CSS-селектор элемента, который будет работать как кнопка "далее" по клику на нее.
prevEl
any
null
Описание
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);
}