Модули: Pagination
Свойства, методы и события модуля Pagination для Swiper.js.
Pagination
Постраничная навигация слайдера Swiper.js.
Параметры Pagination
bulletActiveClass
string
swiper-pagination-bullet-active
Описание
Имя CSS класса текущего активного элемента пагинации.
bulletClass
string
swiper-pagination-bullet
Описание
Имя CSS класса элемента пагинации в обычном состоянии.
bulletElement
string
span
Описание
Определяет, какой HTML-тег будет использоваться для одиночного элемента пагинации. Только для типа bullets
.
clickable
boolean
false
Описание
Если true
, то при клике на элемент пагинации будет происиходить переход к выбранному слайду. Только для типа bullets
.
clickableClass
string
swiper-pagination-clickable
Описание
CSS класс, присваиваемый элементу пагинации, когда элемент clickable
.
currentClass
string
swiper-pagination-current
Описание
Название CSS-класса элемента с текущим активным индексом пагинации типа fraction
.
dynamicBullets
boolean
false
Описание
Лучше использовать этот параметр, когда у вас большое количество слайдов. Тогда будут отображаться элементы пагинации только для видимых слайдов.
dynamicMainBullets
number
1
Описание
Количество основных отображаемых элементов пагинации в режиме dynamicBullets
.
el
any
null
Описание
Строка с CSS-селектором или HTMLElement контейнера с пагинацией.
enabled
boolean
нет
Описание
Включена пагинация или нет. Логический флаг для использования пагинации на определённых разрешениях экрана (с определенными брейкпоинтами).
formatFractionCurrent
function(number)
нет
Описание
Форматирование текущего номера пагинации с дробью (вида 1 / 5
). Функция получает текущий номер - вы возвращаете отформатированное значение.
formatFractionTotal
function(number)
нет
Описание
Форматирование общего количества элементов пагинации с дробью (вида 1 / 5
). Функция получает общее количество слайдов - вы возвращаете отформатированное значение.
hiddenClass
string
swiper-pagination-hidden
Описание
CSS-класс для скрытого состояния пагинации.
hideOnClick
boolean
true
Описание
Переключает значение visibility
(скрыто или видиом) контейнера для пагинации при клике по контейнеру слайдера.
horizontalClass
string
swiper-pagination-horizontal
Описание
CSS класс пагинации слайдера в горизонтальной ориентации.
lockClass
string
swiper-pagination-lock
Описание
CSS класс, назначаемый пагинации слайдера в выключенном состоянии.
modifierClass
string
swiper-pagination-
Описание
Начало модификатора (префикс) CSS-классов, которые добавляются пагинации в зависимости от параметров.
paginationDisabledClass
string
swiper-pagination-disabled
Описание
CSS класс, добавляемый к контейнеру Swiper и элементам пагинации при отключении из-за не попадания в брейкпоинт (текущее разрешение экрана не попадает в указанный диапазон).
progressbarFillClass
string
swiper-pagination-progressbar-fill
Описание
CSS класс для заливки фоновым цветом прогресс-бара пагинации.
progressbarOpposite
boolean
false
Описание
"Отражает" прогресс-бар: в горизонтальном слайдере прогресс-бар становится вертикальным и наоборот, в вертикальном слайдере - горизонтальным.
progressbarOppositeClass
string
swiper-pagination-progressbar-opposite
Описание
CSS класс для "отражённого" прогресс-бара.
renderBullet
function(index, className)
нет
Описание
Параметр позволяет полностью кастомизировать элементы пагинации. Вы должны передать функцию с аргументами index
(текущий номер элемента пагинации) и className
(CSS-класс для элемента пагинации). Только для типа пагинации bullet
.
const swiper = new Swiper('.swiper', {
//...
pagination: {
//...
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
renderCustom
function(swiper, current, total)
нет
Описание
Параметр необходим для типа пагинации custom
. В функции вы указываете как пагинация должна быть отображена.
const swiper = new Swiper('.swiper', {
//...
pagination: {
//...
renderCustom: function (swiper, current, total) {
return current + ' of ' + total;
},
},
});
renderFraction
function(currentClass, totalClass)
нет
Описание
Параметр позволяет кастомизировать HTML вывод пагинации типа fraction
.
const swiper = new Swiper('.swiper', {
//...
pagination: {
//...
renderFraction: function (currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' +
' of ' +
'<span class="' + totalClass + '"></span>';
},
},
});
renderProgressbar
function(progressbarFillClass)
нет
Описание
Параметр позволяет кастомизировать HTML вывод пагинации типа progress
.
const swiper = new Swiper('.swiper', {
//...
pagination: {
//...
renderProgressbar: function (progressbarFillClass) {
return '<span class="' + progressbarFillClass + '"></span>';
},
},
});
totalClass
string
swiper-pagination-total
Описание
CSS класс элемента пагинации типа fraction
, содержащего общее количество слайдов.
type
string
bullets
Описание
Тип пагинации. Может быть bullets
, fraction
, progressbar
или custom
.
verticalClass
string
swiper-pagination-vertical
Описание
CSS класс для пагинации слайдера в вертикальной ориентации.
Методы Pagination
Свойства
swiper.bullets
HTMLElement[]
Описание
Массив с HTMLElement элементов пагинации. Для получения конкретного элемента используйте доступ по индексу swiper.pagination.bullets[1]
.
swiper.el
HTMLElement
Описание
HTMLElement контейнера пагинации.
Методы
swiper.destroy()
нет
Описание
Уничтожение объекта пагинации
swiper.init()
нет
Описание
Инициализация пагинации
swiper.render()
нет
Описание
Отрисовка макета пагинации
swiper.update()
нет
Описание
Обновление состояния элементов пагинации (включены / выключены / активное состояние).
События Navigation
paginationHide
(swiper)
Описание
Событие вызывается в момент скрытия пагинации.
paginationRender
(swiper, paginationEl)
Описание
Событие вызывается после отрисовки пагинации.
paginationShow
(swiper)
Описание
Событие вызывается в момент включения видимости пагинации.
paginationUpdate
(swiper, paginationEl)
Описание
Событие вызывается в момент обновления состояния пагинации.
CSS-переменные Navigation Swiper.js
{
--swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-left: auto;
--swiper-pagination-right: 8px;
--swiper-pagination-bottom: 8px;
--swiper-pagination-top: auto;
--swiper-pagination-fraction-color: inherit;
--swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
--swiper-pagination-progressbar-size: 4px;
--swiper-pagination-bullet-size: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
--swiper-pagination-bullet-inactive-color: #000;
--swiper-pagination-bullet-inactive-opacity: 0.2;
--swiper-pagination-bullet-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 4px;
--swiper-pagination-bullet-vertical-gap: 6px;
}