選項
全部
  • 公開
  • 公開/受保護
  • 全部
選單

介面 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

點擊滑塊容器後，切換（隱藏/顯示）分頁容器的可見性

預設值

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

當分頁被中斷點停用時，在滑塊容器和分頁元素上新增的 CSS 類別名稱

預設值

'swiper-pagination-disabled'

選用 progressbarFillClass

progressbarFillClass: string

分頁進度列填滿元素的 CSS 類別名稱

預設值

'swiper-pagination-progressbar-fill'

選用 progressbarOpposite

progressbarOpposite: boolean

讓分頁進度列與 Swiper 的 direction 參數相反，表示水平滑塊方向的垂直進度列和垂直滑塊方向的水平進度列

預設值

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', {
  //...
  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

  • 此參數允許自訂「分數」分頁 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 產生