Login With Github

Swiper API: Pagination

Pagination Parameters

Parameter Type Default Description
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 type

For 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 type

For 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 type

For 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 rendered

For 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
}

Pagination Methods & Properties

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

Pagination Events

Event name Arguments Description
paginationRender swiper, paginationEl Event will be fired after pagination rendered
paginationUpdate swiper, paginationEl Event will be fired when pagination updated

0 Comment

temp