Swiper事件 | Swiper - v11.2.0 - Swiper 繁體中文

階層

SwiperClass
- Swiper事件

索引

方法

可選 _beforeBreakpoint

_beforeBreakpoint(swiper: any, breakpointParams: any): void

- 定義於 swiper/types/swiper-events.d.ts:218
!內部：事件將在斷點變更之前觸發

參數
- swiper: any
- breakpointParams: any
返回 void

可選 _containerClasses

_containerClasses(swiper: any, classNames: string): void

- 定義於 swiper/types/swiper-events.d.ts:223
!內部：在 Swiper 容器元素上設定 CSS 類別之後觸發的事件

參數
- swiper: any
- classNames: string
返回 void

可選 _freeModeNoMomentumRelease

_freeModeNoMomentumRelease(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:246
!內部：事件將在自由模式觸控結束（釋放）時觸發，並且不會有動量

參數
- swiper: any
返回 void

可選 _slideClass

_slideClass(swiper: any, slideEl: HTMLElement, classNames: string): void

- 定義於 swiper/types/swiper-events.d.ts:228
!內部：在 Swiper 滑動元素上設定 CSS 類別之後觸發的事件

參數
- swiper: any
- slideEl: HTMLElement
- classNames: string
返回 void

可選 _slideClasses

_slideClasses(swiper: any, slides: { classNames: string; index: number; slideEl: HTMLElement }[]): void

- 定義於 swiper/types/swiper-events.d.ts:233
!內部：在所有 Swiper 滑動上設定 CSS 類別之後觸發的事件

參數
- swiper: any
- slides: { classNames: string; index: number; slideEl: HTMLElement }[]
返回 void

可選 _swiper

_swiper(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:241
!內部：事件將在 Swiper 實例可用時立即觸發（在初始化之前）

參數
- swiper: any
返回 void

activeIndexChange

activeIndexChange(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:251
事件將在活動索引變更時觸發

參數
- swiper: any
返回 void

afterInit

afterInit(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:263
事件將在初始化之後立即觸發

參數
- swiper: any
返回 void

beforeDestroy

beforeDestroy(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:64
事件將在 Swiper 銷毀之前觸發

參數
- swiper: any
返回 void

beforeInit

beforeInit(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:267
事件將在初始化之前立即觸發

參數
- swiper: any
返回 void

beforeLoopFix

beforeLoopFix(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:203
事件將在「迴圈修復」之前觸發

參數
- swiper: any
返回 void

beforeResize

beforeResize(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:271
事件將在調整大小處理常式之前觸發

參數
- swiper: any
返回 void

beforeSlideChangeStart

beforeSlideChangeStart(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:275
事件將在幻燈片變更過渡開始之前觸發

參數
- swiper: any
返回 void

beforeTransitionStart

beforeTransitionStart(swiper: any, speed: number, internal: any): void

- 定義於 swiper/types/swiper-events.d.ts:279
事件將在過渡開始之前觸發

參數
- swiper: any
- speed: number
- internal: any
返回 void

breakpoint

breakpoint(swiper: any, breakpointParams: any): void

- 定義於 swiper/types/swiper-events.d.ts:213
事件將在斷點變更時觸發

參數
- swiper: any
- breakpointParams: any
返回 void

changeDirection

changeDirection(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:283
事件將在方向變更時觸發

參數
- swiper: any
返回 void

click

click(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:143
當使用者點擊/輕觸 Swiper 時，將會觸發事件。接收 pointerup 事件作為引數。

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

destroy

destroy(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:291
事件將在 Swiper 銷毀時觸發

參數
- swiper: any
返回 void

doubleClick

doubleClick(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:287
當使用者雙擊/輕觸 Swiper 時，將會觸發事件

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

doubleTap

doubleTap(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:153
當使用者雙輕觸 Swiper 的容器時，將會觸發事件。接收 pointerup 事件作為引數

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

fromEdge

fromEdge(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:178
當 Swiper 從頭或尾位置移動時觸發此事件

參數
- swiper: any
返回 void

init

init(swiper: any): any

在 Swiper 初始化完成後立即觸發。

注意

請注意，使用 swiper.on('init') 語法只有在您設定 init: false 參數時才會生效。

範例

const swiper = new Swiper('.swiper', {
  init: false,
  // other parameters
});
swiper.on('init', function() {
 // do something
});
// init Swiper
swiper.init();

範例

// Otherwise use it as the parameter:
const swiper = new Swiper('.swiper', {
  // other parameters
  on: {
    init: function () {
      // do something
    },
  }
});

參數

swiper: any

回傳 any

lock

lock(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:331
當 swiper 被鎖定時（當 watchOverflow 啟用時）觸發此事件

參數
- swiper: any
返回 void

loopFix

loopFix(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:208
在「循環修復」之後觸發此事件

參數
- swiper: any
返回 void

momentumBounce

momentumBounce(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:295
在動量反彈時觸發此事件

參數
- swiper: any
返回 void

observerUpdate

observerUpdate(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:198
如果啟用觀察者並偵測到 DOM 變動時，將會觸發此事件

參數
- swiper: any
返回 void

orientationchange

orientationchange(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:299
在方向改變時觸發此事件（例如，橫向 -> 直向）

參數
- swiper: any
返回 void

progress

progress(swiper: any, progress: number): void

- 定義於 swiper/types/swiper-events.d.ts:158
當 Swiper 的進度變更時觸發此事件，它會收到一個介於 0 到 1 之間的進度值作為參數

參數
- swiper: any
- 進度: number
返回 void

reachBeginning

reachBeginning(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:163
當 Swiper 到達起始位置（初始位置）時觸發此事件

參數
- swiper: any
返回 void

reachEnd

reachEnd(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:168
當 Swiper 到達最後一張幻燈片時觸發此事件

參數
- swiper: any
返回 void

realIndexChange

realIndexChange(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:259
當實際索引變更時觸發此事件

參數
- swiper: any
返回 void

resize

resize(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:193
在視窗大小調整且 Swiper 執行調整大小操作前觸發此事件

參數
- swiper: any
返回 void

setTransition

setTransition(swiper: any, transition: number): void

- 定義於 swiper/types/swiper-events.d.ts:188
每次當 swiper 開始動畫時觸發此事件。接收目前動畫時間（毫秒）作為參數

參數
- swiper: any
- 動畫時間: number
返回 void

setTranslate

setTranslate(swiper: any, translate: number): void

- 定義於 swiper/types/swiper-events.d.ts:183
當 swiper 的 wrapper 變更位置時觸發此事件。接收目前的位移值作為參數

參數
- swiper: any
- 位移: number
返回 void

slideChange

slideChange(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:73
當目前活動的幻燈片變更時觸發此事件

參數
- swiper: any
返回 void

slideChangeTransitionEnd

slideChangeTransitionEnd(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:83
在動畫移至其他幻燈片（下一張或前一張）後觸發此事件。

參數
- swiper: any
返回 void

slideChangeTransitionStart

slideChangeTransitionStart(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:78
在動畫移至其他幻燈片（下一張或前一張）開始時觸發此事件。

參數
- swiper: any
返回 void

slideNextTransitionEnd

slideNextTransitionEnd(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:93
與 "slideChangeTransitionEnd" 相同，但僅適用於「向前」方向

參數
- swiper: any
返回 void

slideNextTransitionStart

slideNextTransitionStart(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:88
與 "slideChangeTransitionStart" 相同，但僅適用於「向前」方向

參數
- swiper: any
返回 void

slidePrevTransitionEnd

slidePrevTransitionEnd(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:103
與 "slideChangeTransitionEnd" 相同，但僅適用於「向後」方向

參數
- swiper: any
返回 void

slidePrevTransitionStart

slidePrevTransitionStart(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:98
與 "slideChangeTransitionStart" 相同，但僅適用於「向後」方向

參數
- swiper: any
返回 void

slideResetTransitionEnd

slideResetTransitionEnd(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:307
在將幻燈片重置為目前的幻燈片的動畫結束時觸發此事件

參數
- swiper: any
返回 void

slideResetTransitionStart

slideResetTransitionStart(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:303
在將幻燈片重置為目前的幻燈片的動畫開始時觸發此事件

參數
- swiper: any
返回 void

sliderFirstMove

sliderFirstMove(swiper: any, event: TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:311
在第一次觸摸/拖曳移動時觸發此事件

參數
- swiper: any
- 事件: TouchEvent
返回 void

sliderMove

sliderMove(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:133
當使用者觸摸並移動手指在 Swiper 上時觸發此事件。接收 pointermove 事件作為參數。

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

slidesGridLengthChange

slidesGridLengthChange(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:319
當幻燈片網格變更時觸發此事件

參數
- swiper: any
返回 void

slidesLengthChange

slidesLengthChange(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:315
當幻燈片的數量變更時觸發此事件

參數
- swiper: any
返回 void

slidesUpdated

slidesUpdated(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:69
在計算並更新幻燈片及其尺寸後觸發此事件

參數
- swiper: any
返回 void

snapGridLengthChange

snapGridLengthChange(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:323
當快照網格變更時觸發此事件

參數
- swiper: any
返回 void

snapIndexChange

snapIndexChange(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:255
當快照索引變更時觸發此事件

參數
- swiper: any
返回 void

tap

tap(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:148
當使用者點擊/輕觸 Swiper 時，將會觸發事件。接收 pointerup 事件作為引數。

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

toEdge

toEdge(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:173
當 Swiper 移動到起始或結束位置時，將會觸發此事件。

參數
- swiper: any
返回 void

touchEnd

touchEnd(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:138
當使用者放開 Swiper 時，將會觸發此事件。接收 pointerup 事件作為參數。

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

touchMove

touchMove(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:123
當使用者觸摸並在 Swiper 上移動手指時，將會觸發此事件。接收 pointermove 事件作為參數。

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

touchMoveOpposite

touchMoveOpposite(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:128
當使用者觸摸並在 Swiper 上朝與方向參數相反的方向移動手指時，將會觸發此事件。接收 pointermove 事件作為參數。

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

touchStart

touchStart(swiper: any, event: MouseEvent | PointerEvent | TouchEvent): void

- 定義於 swiper/types/swiper-events.d.ts:118
當使用者觸摸 Swiper 時，將會觸發此事件。接收 pointerdown 事件作為參數。

參數
- swiper: any
- event: MouseEvent | PointerEvent | TouchEvent
返回 void

transitionEnd

transitionEnd(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:113
在轉換結束後，將會觸發此事件。

參數
- swiper: any
返回 void

transitionStart

transitionStart(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:108
在轉換開始時，將會觸發此事件。

參數
- swiper: any
返回 void

unlock

unlock(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:335
當 swiper 解鎖時（當啟用 watchOverflow 時），將會觸發此事件。

參數
- swiper: any
返回 void

update

update(swiper: any): void

- 定義於 swiper/types/swiper-events.d.ts:327
在呼叫 swiper.update() 之後，將會觸發此事件。

參數
- swiper: any
返回 void

階層

索引

方法

方法

可選 _beforeBreakpoint

參數

swiper: any

breakpointParams: any

返回 void

可選 _containerClasses

參數

swiper: any

classNames: string

返回 void

可選 _freeModeNoMomentumRelease

參數

swiper: any

返回 void

可選 _slideClass

參數

swiper: any

slideEl: HTMLElement

classNames: string

返回 void

可選 _slideClasses

參數

swiper: any

slides: { classNames: string; index: number; slideEl: HTMLElement }[]

返回 void

可選 _swiper

參數

swiper: any

返回 void

activeIndexChange

參數

swiper: any

返回 void

afterInit

參數

swiper: any

返回 void

beforeDestroy

參數

swiper: any

返回 void

beforeInit

參數

swiper: any

返回 void

beforeLoopFix

參數

swiper: any

返回 void

beforeResize

參數

swiper: any

返回 void

beforeSlideChangeStart

參數

swiper: any

返回 void

beforeTransitionStart

參數

swiper: any

speed: number

internal: any

返回 void

breakpoint

參數

swiper: any

breakpointParams: any

返回 void

changeDirection

參數

swiper: any

返回 void

click

參數

swiper: any

event: MouseEvent | PointerEvent | TouchEvent