Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface PaginationOptions

Hierarchy

  • PaginationOptions

Index

Properties

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: null | CSSSelector | HTMLElement

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 formatFractionCurrent

formatFractionCurrent: (number: number) => string | number

Type declaration

    • (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

Type declaration

    • (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 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 renderBullet

renderBullet: (index: number, className: string) => void

Type declaration

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

    • 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

      Parameters

      • index: number
      • className: string

      Returns void

Optional renderCustom

renderCustom: (swiper: default, current: number, total: number) => void

Type declaration

    • (swiper: default, current: number, total: number): void

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

      Parameters

      • swiper: default
      • current: number
      • total: number

      Returns void

Optional renderFraction

renderFraction: (currentClass: string, totalClass: string) => void

Type declaration

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

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

      Parameters

      • currentClass: string
      • totalClass: string

      Returns void

Optional renderProgressbar

renderProgressbar: (progressbarFillClass: string) => void

Type declaration

    • (progressbarFillClass: string): void

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

      Parameters

      • progressbarFillClass: string

      Returns void

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: "bullets" | "fraction" | "progressbar" | "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'

Generated using TypeDoc