Расширения Joomla WebTolk
93 Всего расширений
11 Категорий
456 Выпущено версий
471618 Всего скачиваний
Модули: Pagination
WT JSwiper - SWiper.js для Joomla-разработчиков - Документация
Категория:
Плагины Joomla
Свойства, методы и события модуля 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 класс для пагинации слайдера в вертикальной ориентации.
Продолжение следует...