ScrollbarOptions | Swiper - v11.2.0

包含捲軸參數的物件。

範例

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

階層

ScrollbarOptions

索引

屬性

選用 dragClass

dragClass: string

捲軸可拖曳元素的 CSS 類別

預設值: 'swiper-scrollbar-drag'

選用 dragSize

dragSize: number | "auto"

捲軸可拖曳元素的大小，單位為 px

預設值: 'auto'

選用 draggable

draggable: boolean

設定為 true 以啟用捲軸拖曳功能，讓您控制滑塊位置

預設值: false

選用 el

el: any

帶有 CSS 選擇器或捲軸容器 HTML 元素的字串。

預設值: null

選用 enabled

enabled: boolean

用於斷點的布林屬性，以在特定斷點上啟用/停用捲軸

選用 hide

hide: boolean

使用者互動後自動隱藏捲軸

預設值: true

選用 horizontalClass

horizontalClass: string

在水平 Swiper 中設定給捲軸的 CSS 類別名稱

預設值: 'swiper-scrollbar-horizontal'

選用 lockClass

lockClass: string

捲軸停用時的額外 CSS 類別

預設值: 'swiper-scrollbar-lock'

選用 scrollbarDisabledClass

scrollbarDisabledClass: string

當捲軸因斷點而停用時，加到 swiper 容器和捲軸元素的 CSS 類別名稱

預設值: 'swiper-scrollbar-disabled'

選用 snapOnRelease

snapOnRelease: boolean

設定為 true 以在您釋放捲軸時將滑塊位置對齊到投影片

預設值: false

選用 verticalClass

verticalClass: string

在垂直 Swiper 中設定給捲軸的 CSS 類別名稱

預設值: 'swiper-scrollbar-vertical'