| pagination | object | | Object with navigation parameters. For example:var mySwiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', type: 'bullets', }, }); |
| { |
| el | string | null | String with CSS selector or HTML element of the container with pagination |
| type | string | ‘bullets’ | String with type of pagination. Can be “bullets”, “fraction”, “progressbar” or “custom” |
| bulletElement | string | ‘span’ | Defines which HTML tag will be use to represent single pagination bullet. Only for bulletspagination type. |
| dynamicBullets | boolean | false | Good to enable if you use bullets pagination with a lot of slides. So it will keep only few bullets visible at the same time. |
| dynamicMainBullets | number | 1 | The number of main bullets visible when dynamicBullets enabled. |
| hideOnClick | boolean | true | Toggle (hide/true) pagination container visibility after click on Slider’s container |
| clickable | boolean | false | If true then clicking on pagination button will cause transition to appropriate slide. Only for bulletspagination type |
| progressbarOpposite | boolean | false | Makes pagination progressbar opposite to Swiper’s `direction` parameter, means vertical progressbar for horizontal swiper direction and horizontal progressbar for vertical swiper direction |
| formatFractionCurrent | function(number) | number => number | Custom format fraction pagination current number. Function receives current number, and you need to return formatted value |
| formatFractionTotal | function(number) | number => number | Custom format fraction pagination total number. Function receives total number, and you need to return formatted value |
| renderBullet | function(index, className) | null | This parameter allows totally customize pagination bullets, you need to pass here a function that accepts index number of pagination bullet and required element class name (className). Only for bullets pagination typeFor example, with this code, we can add slide number into pagination bullet:var swiper = new Swiper('.swiper-container', { //... renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } }); |
| renderFraction | function(currentClass, totalClass) | null | This parameter allows to customize “fraction” pagination html. Only for fraction pagination typeFor example:var swiper = new Swiper('.swiper-container', { //... renderFraction: function (currentClass, totalClass) { return '<span class="' + currentClass + '"></span>' + ' of ' + '<span class="' + totalClass + '"></span>'; } }); |
| renderProgressbar | function(progressbarFillClass) | null | This parameter allows to customize “progress” pagination. Only for progress pagination typeFor example:var swiper = new Swiper('.swiper-container', { //... renderProgressbar: function (progressbarFillClass) { return '<span class="' + progressbarFillClass + '"></span>'; } }); |
| renderCustom | function(swiper, current, total) | null | This parameter is required for custom pagination type where you have to specify how it should be renderedFor example:var swiper = new Swiper('.swiper-container', { //... renderCustom: function (swiper, current, total) { return current + ' of ' + total; } }); |
| bulletClass | string | ‘swiper-pagination-bullet’ | CSS class name of single pagination bullet |
| bulletActiveClass | string | ‘swiper-pagination-bullet-active’ | CSS class name of currently active pagination bullet |
| modifierClass | string | ‘swiper-pagination-‘ | The beginning of the modifier CSS class name that will be added to pagination depending on parameters |
| currentClass | string | ‘swiper-pagination-current’ | CSS class name of the element with currently active index in “fraction” pagination |
| totalClass | string | ‘swiper-pagination-total’ | CSS class name of the element with total number of “snaps” in “fraction” pagination |
| hiddenClass | string | ‘swiper-pagination-hidden’ | CSS class name of pagination when it becomes inactive |
| progressbarFillClass | string | ‘swiper-pagination-progressbar-fill’ | CSS class name of pagination progressbar fill element |
| clickableClass | string | ‘swiper-pagination-clickable’ | CSS class name set to pagination when it is clickable |
| } |
