选项
所有
  • 公共
  • 公共/受保护
  • 所有
菜单

接口 PaginationOptions

层级

  • PaginationOptions

索引

属性

方法

属性

可选 bulletActiveClass

bulletActiveClass: string

当前活动分页点的 CSS 类名

默认值

'swiper-pagination-bullet-active'

可选 bulletClass

bulletClass: string

单个分页点的 CSS 类名

默认值

'swiper-pagination-bullet'

可选 bulletElement

bulletElement: string

定义哪个 HTML 标签将用于表示单个分页点。仅适用于 'bullets' 分页类型。

默认值

'span'

可选 clickable

clickable: boolean

如果为 true，点击分页按钮将导致过渡到相应的幻灯片。仅适用于点状分页类型

默认值

false

可选 clickableClass

clickableClass: string

分页可点击时设置的 CSS 类名

默认值

'swiper-pagination-clickable'

可选 currentClass

currentClass: string

在“分数”分页中，显示当前活动索引的元素的 CSS 类名

默认值

'swiper-pagination-current'

可选 dynamicBullets

dynamicBullets: boolean

如果您使用带有大量幻灯片的点状分页，建议启用此选项。这样它将同时只显示少数几个点。

默认值

false

可选 dynamicMainBullets

dynamicMainBullets: number

启用 dynamicBullets 时可见的主点数。

默认值

1

可选 el

el: any

带分页的容器的 CSS 选择器字符串或 HTML 元素

默认值

null

可选 enabled

enabled: boolean

用于在特定断点处启用/禁用分页的布尔属性

可选 hiddenClass

hiddenClass: string

分页变为非活动状态时的 CSS 类名

默认值

'swiper-pagination-hidden'

可选 hideOnClick

hideOnClick: boolean

点击 Slider 容器后，切换（隐藏/显示）分页容器可见性

默认值

true

可选 horizontalClass

horizontalClass: string

在水平 Swiper 中设置给分页的 CSS 类名

默认值

'swiper-pagination-horizontal'

可选 lockClass

lockClass: string

分页禁用时设置的 CSS 类名

默认值

'swiper-pagination-lock'

可选 modifierClass

modifierClass: string

根据参数添加到分页的修饰符 CSS 类名的开头

默认值

'swiper-pagination-'

可选 paginationDisabledClass

paginationDisabledClass: string

当分页被断点禁用时，添加到 swiper 容器和分页元素的 CSS 类名

默认值

'swiper-pagination-disabled'

可选 progressbarFillClass

progressbarFillClass: string

分页进度条填充元素的 CSS 类名

默认值

'swiper-pagination-progressbar-fill'

可选 progressbarOpposite

progressbarOpposite: boolean

使分页进度条与 Swiper 的 direction 参数相反，这意味着水平 Swiper 方向的垂直进度条和垂直 Swiper 方向的水平进度条

默认值

false

可选 progressbarOppositeClass

progressbarOppositeClass: string

分页进度条反向的 CSS 类名

默认值

'swiper-pagination-progressbar-opposite'

可选 totalClass

totalClass: string

在“分数”分页中，包含“快照”总数的元素的 CSS 类名

默认值

'swiper-pagination-total'

可选 type

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

分页类型字符串。可以是 'bullets'、'fraction'、'progressbar' 或 'custom'

默认值

'bullets'

可选 verticalClass

verticalClass: string

在垂直 Swiper 中设置给分页的 CSS 类名

默认值

'swiper-pagination-vertical'

方法

可选 formatFractionCurrent

  • formatFractionCurrent(number: number): string | number

  • 格式化分数分页当前数字。函数接收当前数字，您需要返回格式化后的值

    参数

    • number: number

    返回 string | number

可选 formatFractionTotal

  • formatFractionTotal(number: number): string | number

  • 格式化分数分页总数。函数接收总数，您需要返回格式化后的值

    参数

    • number: number

    返回 string | number

可选 renderBullet

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

  • 此参数允许完全自定义分页点，您需要在此处传递一个函数，该函数接受分页点的 index 数字和所需的元素类名 (className)。仅适用于 'bullets' 分页类型

    默认值

    null

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

    参数

    • index: number
    • className: string

    返回 string

可选 renderCustom

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

  • 此参数是 'custom' 分页类型所必需的，您必须指定如何渲染它。

    默认值

    null

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

    参数

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

    返回 string

可选 renderFraction

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

  • 此参数允许自定义“分数”分页 HTML。仅适用于 'fraction' 分页类型

    默认值

    null

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

    参数

    • currentClass: string
    • totalClass: string

    返回 string

可选 renderProgressbar

  • renderProgressbar(progressbarFillClass: string): string

  • 此参数允许自定义“进度条”分页。仅适用于 'progress' 分页类型

    默认值

    null

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

    参数

    • progressbarFillClass: string

    返回 string

使用 TypeDoc 生成