イベントリファレンス

Swiper インスタンスは様々なライフサイクルイベントを発行します。イベントは on() メソッドで購読します。

const swiper = new Swiper('.swiper', {
  on: {
    init() { console.log('Swiper initialized'); },
    slideChange() { console.log('Slide changed to:', swiper.activeIndex); },
  },
});

// または
swiper.on('slideChange', () => {
  console.log('Slide changed');
});

初期化イベント

イベント名	説明
`init`	Swiper が初期化されたときに発火
`beforeInit`	Swiper の初期化前に発火
`afterInit`	Swiper 初期化の直後に発火
`_beforeDestroy`	破棄処理の直前に発火
`destroy`	Swiper が破棄されたときに発火

例

const swiper = new Swiper('.swiper', {
  on: {
    init() {
      console.log('準備完了！ スライド数:', this.slides.length);
    },
  },
});

スライド変更イベント

イベント名	説明
`slideChange`	アクティブなスライドが変更されたときに発火
`slideChangeTransitionStart`	スライド変更のトランジション開始時に発火
`slideChangeTransitionEnd`	スライド変更のトランジション終了時に発火
`fromEdge`	スライダーが端から端へ移動したときに発火
`toEdge`	スライダーが端に到達したときに発火

例

swiper.on('slideChange', function () {
  console.log('スライドが ' + this.previousIndex + ' から ' + this.activeIndex + ' に変わりました');
});

タッチイベント

イベント名	説明
`touchStart`	タッチ/クリック開始時に発火
`touchMove`	タッチ/ドラッグ中に発火
`touchMoveOpposite`	逆方向へのタッチ移動時に発火
`touchEnd`	タッチ/クリック終了時に発火
`touchRelease`	タッチリリース時に発火 (swipe 処理後)
`touchReleaseTransitionEnd`	タッチリリース後のトランジション終了時に発火 (swipe 処理後)
`swipe`	スワイプが完了したときに発火
`swipeStart`	スワイプ開始時に発火
`swipeEnd`	スワイプ終了時に発火
`tap`	タップ（クリック）時に発火
`doubleTap`	ダブルタップ時に発火
`click`	クリック時に発火（スライドが変更された場合は発火しない）
`beforeClick`	クリックイベントの直前に発火

トランジションイベント

イベント名	説明
`transitionStart`	トランジション開始時に発火
`transitionEnd`	トランジション終了時に発火
`setTransition`	トランジション時間が設定されたときに発火
`beforeTransitionStart`	トランジション開始前に発火（キャンセル可能）
`beforeTransition`	トランジション開始前に発火（キャンセル可能）

リサイズイベント

イベント名	説明
`resize`	ウィンドウ / コンテナのリサイズ時に発火
`beforeResize`	リサイズ処理の直前に発火
`afterResize`	リサイズ処理の直後に発火
`orientationChange`	端末の向きが変わったときに発火

ループイベント

イベント名	説明
`loopFix`	ループモードの補正が実行されたときに発火
`loopChange`	ループ内でアクティブスライドが戻されたときに発火
`beforeLoopFix`	ループ補正の直前に発火

画像イベント

イベント名	説明
`lazyImageLoad`	遅延読み込み画像の読み込み開始時に発火
`lazyImageReady`	遅延読み込み画像の読み込み完了時に発火
`imagesReady`	すべての画像の読み込み完了時に発火
`imagesLoad`	画像の読み込みが完了したときに発火

ナビゲーションイベント

イベント名	説明
`paginationRender`	ページネーションが描画されたときに発火
`paginationUpdate`	ページネーションが更新されたときに発火
`navigationHide`	ナビゲーションボタンが非表示になったときに発火
`navigationShow`	ナビゲーションボタンが表示されたときに発火
`scrollbarDragStart`	スクロールバーのドラッグ開始時に発火
`scrollbarDragMove`	スクロールバーのドラッグ中に発火
`scrollbarDragEnd`	スクロールバーのドラッグ終了時に発火

スナップ / 進行度イベント

イベント名	説明
`beforeSnapStart`	スナップ開始前に発火
`snapStart`	スナップ開始時に発火
`snapEnd`	スナップ終了時に発火
`snap`	スナップ位置が変わったときに発火
`progress`	スライダーの進行度が変わったときに発火
`setProgress`	進行度が設定されたときに発火
`activeIndexChange`	`activeIndex` が変更されたときに発火
`realIndexChange`	`realIndex` が変更されたときに発火
`snapIndexChange`	`snapIndex` が変更されたときに発火
`slidesLengthChange`	スライド数が変更されたときに発火
`slidesGridLengthChange`	スライドグリッド長が変更されたときに発火
`slidesUpdated`	スライドが更新されたときに発火

オートプレイイベント

イベント名	説明
`autoplayStart`	自動再生が開始したときに発火
`autoplayStop`	自動再生が停止したときに発火
`autoplayPause`	自動再生が一時停止したときに発火
`autoplayResume`	自動再生が再開したときに発火
`autoplay`	自動再生の各サイクルで発火
`beforeAutoplayStart`	自動再生開始前に発火

キーボードイベント

イベント名	説明
`keyboardKeyDown`	キーボードのキーが押されたときに発火
`keyboardPress`	キーボードが押されたときに発火

ハッシュナビケーションイベント

イベント名	説明
`hashChange`	URL ハッシュが変更されたときに発火
`hashSet`	URL ハッシュが設定されたときに発火
`beforeHashChange`	ハッシュ変更の直前に発火
`beforeHashSet`	ハッシュ設定の直前に発火

履歴イベント

イベント名	説明
`historyPush`	ブラウザ履歴にプッシュされたときに発火
`historyReplace`	ブラウザ履歴が置き換えられたときに発火
`historySet`	履歴が設定されたときに発火
`historyChange`	履歴が変更されたときに発火

その他のイベント

イベント名	説明
`beforeSlideChangeStart`	スライド変更の直前に発火
`sliderMove`	スライダーが移動したときに発火
`sliderFirstMove`	スライダーが最初に移動したときに発火
`slidesLengthChange`	スライド数が変更されたときに発火
`setTranslate`	トランスレート値が設定されたときに発火
`beforeDestroy`	破棄処理の直前に発火
`maxBackfaceLimit`	最大バックフェイス制限に達したときに発火
`observerUpdate`	オブザーバーが更新を検出したときに発火（MutationObserver 使用時）
`crsrChange`	カーソルが変更されたときに発火
`containerSizeChanged`	コンテナサイズが変更されたときに発火
`beforeLock`	ロック前に発火
`lock`	スライダーがロックされたときに発火
`beforeUnlock`	アンロック前に発火
`unlock`	スライダーがアンロックされたときに発火
`beforeSlide`	スライド変更前に発火

すべてのイベントを解除する

swiper.off('slideChange', myHandler);   // 特定のハンドラを解除
swiper.off('slideChange');               // 特定イベントの全ハンドラを解除
swiper.offAll();                          // すべてのイベントハンドラを解除
swiper.offAny('*');                      // offAny で登録したすべてを解除