Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface PaginationOptions

Hierarchy

  • PaginationOptions

Index

Properties

Methods

Properties

Optional bulletActiveClass

bulletActiveClass: string

CSS class name of currently active pagination bullet

default

'swiper-pagination-bullet-active'

Optional bulletClass

bulletClass: string

CSS class name of single pagination bullet

default

'swiper-pagination-bullet'

Optional bulletElement

bulletElement: string

Defines which HTML tag will be used to represent single pagination bullet. Only for 'bullets' pagination type.

default

'span'

Optional clickable

clickable: boolean

If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type

default

false

Optional clickableClass

clickableClass: string

CSS class name set to pagination when it is clickable

default

'swiper-pagination-clickable'

Optional currentClass

currentClass: string

CSS class name of the element with currently active index in "fraction" pagination

default

'swiper-pagination-current'

Optional dynamicBullets

dynamicBullets: boolean

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.

default

false

Optional dynamicMainBullets

dynamicMainBullets: number

The number of main bullets visible when dynamicBullets enabled.

default

1

Optional el

el: any

String with CSS selector or HTML element of the container with pagination

default

null

Optional enabled

enabled: boolean

Boolean property to use with breakpoints to enable/disable pagination on certain breakpoints

Optional hiddenClass

hiddenClass: string

CSS class name of pagination when it becomes inactive

default

'swiper-pagination-hidden'

Optional hideOnClick

hideOnClick: boolean

Toggle (hide/show) pagination container visibility after click on Slider's container

default

true

Optional horizontalClass

horizontalClass: string

CSS class name set to pagination in horizontal Swiper

default

'swiper-pagination-horizontal'

Optional lockClass

lockClass: string

CSS class name set to pagination when it is disabled

default

'swiper-pagination-lock'

Optional modifierClass

modifierClass: string

The beginning of the modifier CSS class name that will be added to pagination depending on parameters

default

'swiper-pagination-'

Optional paginationDisabledClass

paginationDisabledClass: string

CSS class name added on swiper container and pagination element when pagination is disabled by breakpoint

default

'swiper-pagination-disabled'

Optional progressbarFillClass

progressbarFillClass: string

CSS class name of pagination progressbar fill element

default

'swiper-pagination-progressbar-fill'

Optional progressbarOpposite

progressbarOpposite: boolean

Makes pagination progressbar opposite to Swiper's direction parameter, means vertical progressbar for horizontal swiper direction and horizontal progressbar for vertical swiper direction

default

false

Optional progressbarOppositeClass

progressbarOppositeClass: string

CSS class name of pagination progressbar opposite

default

'swiper-pagination-progressbar-opposite'

Optional totalClass

totalClass: string

CSS class name of the element with total number of "snaps" in "fraction" pagination

default

'swiper-pagination-total'

Optional type

type: "progressbar" | "bullets" | "fraction" | "custom"

String with type of pagination. Can be 'bullets', 'fraction', 'progressbar' or 'custom'

default

'bullets'

Optional verticalClass

verticalClass: string

CSS class name set to pagination in vertical Swiper

default

'swiper-pagination-vertical'

Methods

Optional formatFractionCurrent

  • formatFractionCurrent(number: number): string | number

  • format fraction pagination current number. Function receives current number, and you need to return formatted value

    Parameters

    • number: number

    Returns string | number

Optional formatFractionTotal

  • formatFractionTotal(number: number): string | number

  • format fraction pagination total number. Function receives total number, and you need to return formatted value

    Parameters

    • number: number

    Returns string | number

Optional renderBullet

  • renderBullet(index: number, className: string): string

  • 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

    default

    null

    example
    const swiper = new Swiper('.swiper', {
  //...
  renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});

    Parameters

    • index: number
    • className: string

    Returns string

Optional renderCustom

  • renderCustom(swiper: any, current: number, total: number): string

  • This parameter is required for 'custom' pagination type where you have to specify how it should be rendered.

    default

    null

    example
    const swiper = new Swiper('.swiper', {
  //...
  renderCustom: function (swiper, current, total) {
    return current + ' of ' + total;
  }
});

    Parameters

    • swiper: any
    • current: number
    • total: number

    Returns string

Optional renderFraction

  • renderFraction(currentClass: string, totalClass: string): string

  • This parameter allows to customize "fraction" pagination html. Only for 'fraction' pagination type

    default

    null

    example
    const swiper = new Swiper('.swiper', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
              ' of ' +
              '<span class="' + totalClass + '"></span>';
  }
});

    Parameters

    • currentClass: string
    • totalClass: string

    Returns string

Optional renderProgressbar

  • renderProgressbar(progressbarFillClass: string): string

  • This parameter allows to customize "progress" pagination. Only for 'progress' pagination type

    default

    null

    example
    const swiper = new Swiper('.swiper', {
  //...
  renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
  }
});

    Parameters

    • progressbarFillClass: string

    Returns string

Generated using TypeDoc