选项
全部
  • 公开
  • 公开/受保护
  • 全部
菜单

接口 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

在“fraction”分页中，具有当前活动索引的元素的 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

在“fraction”分页中，具有“快照”总数的元素的 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', {
  //...
  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', {
  //...
  renderCustom: function (swiper, current, total) {
    return current + ' of ' + total;
  }
});

    参数

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

    返回 string

可选 renderFraction

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

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

    默认值

    null

    示例
    const swiper = new Swiper('.swiper', {
  //...
  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', {
  //...
  renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
  }
});

    参数

    • progressbarFillClass: string

    返回 string

使用 TypeDoc 生成