Swiper API: Pagination

Pagination Parameters

paginationobject Object with navigation parameters. For example:var mySwiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', type: 'bullets', }, }); 
elstringnullString with CSS selector or HTML element of the container with pagination
typestring‘bullets’String with type of pagination. Can be “bullets”, “fraction”, “progressbar” or “custom”
bulletElementstring‘span’Defines which HTML tag will be use to represent single pagination bullet. Only for bulletspagination type.
dynamicBulletsbooleanfalseGood to enable if you use bullets pagination with a lot of slides. So it will keep only few bullets visible at the same time.
dynamicMainBulletsnumber1The number of main bullets visible when dynamicBullets enabled.
hideOnClickbooleantrueToggle (hide/true) pagination container visibility after click on Slider’s container
clickablebooleanfalseIf true then clicking on pagination button will cause transition to appropriate slide. Only for bulletspagination type
progressbarOppositebooleanfalseMakes pagination progressbar opposite to Swiper’s `direction` parameter, means vertical progressbar for horizontal swiper direction and horizontal progressbar for vertical swiper direction
formatFractionCurrentfunction(number)number => numberCustom format fraction pagination current number. Function receives current number, and you need to return formatted value
formatFractionTotalfunction(number)number => numberCustom format fraction pagination total number. Function receives total number, and you need to return formatted value
renderBulletfunction(index, className)nullThis 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>'; } });
renderFractionfunction(currentClass, totalClass)nullThis 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>'; } });
renderProgressbarfunction(progressbarFillClass)nullThis 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>'; } });
renderCustomfunction(swiper, current, total)nullThis 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; } });
bulletClassstring‘swiper-pagination-bullet’CSS class name of single pagination bullet
bulletActiveClassstring‘swiper-pagination-bullet-active’CSS class name of currently active pagination bullet
modifierClassstring‘swiper-pagination-‘The beginning of the modifier CSS class name that will be added to pagination depending on parameters
currentClassstring‘swiper-pagination-current’CSS class name of the element with currently active index in “fraction” pagination
totalClassstring‘swiper-pagination-total’CSS class name of the element with total number of “snaps” in “fraction” pagination
hiddenClassstring‘swiper-pagination-hidden’CSS class name of pagination when it becomes inactive
progressbarFillClassstring‘swiper-pagination-progressbar-fill’CSS class name of pagination progressbar fill element
clickableClassstring‘swiper-pagination-clickable’CSS class name set to pagination when it is clickable

Pagination Methods & Properties

mySwiper.pagination.elHTMLElement of pagination container element
mySwiper.pagination.bulletsDom7 array-like collection of pagination bullets HTML elements. To get specific slide HTMLElement use mySwiper.pagination.bullets[1]
mySwiper.pagination.render();Render pagination layout
mySwiper.pagination.update();Update pagination state (enabled/disabled/active)

Pagination Events

Event nameArgumentsDescription
paginationRenderswiper, paginationElEvent will be fired after pagination rendered
paginationUpdateswiper, paginationElEvent will be fired when pagination updated

Leave a Comment

Your email address will not be published.