---
title: "Pagination: модуль Swiper.js. Документация на русском. - WebTolk"
description: "Свойства, методы и события модуля Pagination для Swiper.js на русском языке. Документация для разработчиков."
url: "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-module-pagination"
date: "2026-06-20T04:46:37+00:00"
language: "ru-RU"
---

# Модули: Pagination

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

**Категория:** [Плагины Joomla](https://web-tolk.ru/dev/joomla-plugins)

[Проект](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper)[Версии](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/versions)[Документация](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation)[GitHub](https://github.com/WebTolk/WT-JSwiper-Joomla-web-asset-plugin)[JED](https://extensions.joomla.org/extension/core-enhancements/libraries/wt-jswiper/)

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

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/",
                "name": "Главная"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/dev",
                "name": "Расширения Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "/dev/joomla-plugins",
                "name": "Плагины Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 4,
            "item": {
                "@id": "/dev/joomla-plugins/wt-jswiper",
                "name": "WT JSwiper - SWiper.js для Joomla-разработчиков"
            }
        },
        {
            "@type": "ListItem",
            "position": 5,
            "item": {
                "@id": "/dev/joomla-plugins/wt-jswiper/documentation",
                "name": "Документация"
            }
        },
        {
            "@type": "ListItem",
            "position": 6,
            "item": {
                "name": "Модули: Pagination"
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "images/webtolk-1080p.jpg",
                "contentUrl": "images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-module-pagination",
            "name": "Pagination: модуль Swiper.js. Документация на русском. - WebTolk",
            "description": "Свойства, методы и события модуля Pagination для Swiper.js на русском языке. Документация для разработчиков.",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/TechArticle/base"
            },
            "inLanguage": "ru-RU",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "TechArticle",
            "headline": "Модули: Pagination",
            "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-module-pagination",
            "description": "Свойства, методы и события модуля Pagination для Swiper.js.",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-module-pagination"
            },
            "keywords": [
                "swiper",
                " swiper js",
                " swiper modules",
                " swiper Pagination"
            ]
        }
    ]
}
```