Swiper - v12.0.3
    Preparing search index...

    Interface PaginationOptions

    interface PaginationOptions {
        bulletActiveClass?: string;
        bulletClass?: string;
        bulletElement?: string;
        clickable?: boolean;
        clickableClass?: string;
        currentClass?: string;
        dynamicBullets?: boolean;
        dynamicMainBullets?: number;
        el?: HTMLElement | CSSSelector | null;
        enabled?: boolean;
        formatFractionCurrent?: (number: number) => string | number;
        formatFractionTotal?: (number: number) => string | number;
        hiddenClass?: string;
        hideOnClick?: boolean;
        horizontalClass?: string;
        lockClass?: string;
        modifierClass?: string;
        paginationDisabledClass?: string;
        progressbarFillClass?: string;
        progressbarOpposite?: boolean;
        progressbarOppositeClass?: string;
        renderBullet?: (index: number, className: string) => string;
        renderCustom?: (
            swiper: SwiperClass,
            current: number,
            total: number,
        ) => string;
        renderFraction?: (currentClass: string, totalClass: string) => string;
        renderProgressbar?: (progressbarFillClass: string) => string;
        totalClass?: string;
        type?: "bullets" | "fraction" | "progressbar" | "custom";
        verticalClass?: string;
    }
    Index

    Properties

    bulletActiveClass? bulletClass? bulletElement? clickable? clickableClass? currentClass? dynamicBullets? dynamicMainBullets? el? enabled? formatFractionCurrent? formatFractionTotal? hiddenClass? hideOnClick? horizontalClass? lockClass? modifierClass? paginationDisabledClass? progressbarFillClass? progressbarOpposite? progressbarOppositeClass? renderBullet? renderCustom? renderFraction? renderProgressbar? totalClass? type? verticalClass?

    Properties

    bulletActiveClass?: string

    CSS class name of currently active pagination bullet

    'swiper-pagination-bullet-active'
    bulletClass?: string

    CSS class name of single pagination bullet

    'swiper-pagination-bullet'
    bulletElement?: string

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

    'span'
    clickable?: boolean

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

    false
    clickableClass?: string

    CSS class name set to pagination when it is clickable

    'swiper-pagination-clickable'
    currentClass?: string

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

    'swiper-pagination-current'
    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.

    false
    dynamicMainBullets?: number

    The number of main bullets visible when dynamicBullets enabled.

    1
    el?: HTMLElement | CSSSelector | null

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

    null
    enabled?: boolean

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

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

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

    formatFractionTotal?: (number: number) => string | number

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

    hiddenClass?: string

    CSS class name of pagination when it becomes inactive

    'swiper-pagination-hidden'
    hideOnClick?: boolean

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

    true
    horizontalClass?: string

    CSS class name set to pagination in horizontal Swiper

    'swiper-pagination-horizontal'
    lockClass?: string

    CSS class name set to pagination when it is disabled

    'swiper-pagination-lock'
    modifierClass?: string

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

    'swiper-pagination-'
    paginationDisabledClass?: string

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

    'swiper-pagination-disabled'
    progressbarFillClass?: string

    CSS class name of pagination progressbar fill element

    'swiper-pagination-progressbar-fill'
    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

    false
    progressbarOppositeClass?: string

    CSS class name of pagination progressbar opposite

    'swiper-pagination-progressbar-opposite'
    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

    null

    const swiper = new Swiper('.swiper', {
      //...
      pagination: {
        //...
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
      },
    });
    renderCustom?: (swiper: SwiperClass, current: number, total: number) => string

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

    null

    const swiper = new Swiper('.swiper', {
      //...
      pagination: {
        //...
        renderCustom: function (swiper, current, total) {
          return current + ' of ' + total;
        },
      },
    });
    renderFraction?: (currentClass: string, totalClass: string) => string

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

    null

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

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

    null

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

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

    'swiper-pagination-total'
    type?: "bullets" | "fraction" | "progressbar" | "custom"

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

    'bullets'
    verticalClass?: string

    CSS class name set to pagination in vertical Swiper

    'swiper-pagination-vertical'

    Settings

    Member Visibility

    On This Page

    Properties