Модули: Pagination

WT JSwiper - SWiper.js для Joomla-разработчиков - Документация

Категория: Плагины Joomla

Проект Версии Документация GitHub JED

Свойства, методы и события модуля 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;
}