イベントリファレンス

ハンドラの登録

Splide#on()メソッドを使って、イベントハンドラを登録できます。

var splide = new Splide( '.splide' ).mount();

splide.on( 'move', function () {
  // 何かの処理
} );
JavaScript

var splide = new Splide( '.splide' ).mount();


splide.on( 'move', function () {
  // 何かの処理
} );

Splide#destroy()が呼ばれると、すべてのハンドラは削除されます。もしdestroyオプションを使用し、かつハンドラを継続して使用したい場合は、リマウントされるたびにハンドラを再登録する必要があることに注意してください。これには、エクステンションを作成することでしか対処できません。

Event List

mounted

すべてのコンポーネントがマウントされた直後に発生します。このイベントを利用するには、mount()メソッドを呼ぶ前にハンドラを登録しておく必要があります。

var splide = new Splide( '.splide' ).mount();

splide.on( 'mounted', function () {
  // この処理は実行されない
} );


var splide = new Splide( '.splide' );

splide.on( 'mounted', function () {
  // この処理は実行される
} );

splide.mount();
JavaScript

var splide = new Splide( '.splide' ).mount();


splide.on( 'mounted', function () {
  // この処理は実行されない
} );




var splide = new Splide( '.splide' );


splide.on( 'mounted', function () {
  // この処理は実行される
} );


splide.mount();

ready

mountedイベントの直後に発生しますが、IDLE状態に遷移しています。

click

ユーザがスライドをクリックした際に発生します。

move

スライダーが動く直前に発生します。

moved

スライダーが動き終わった後に発生します。

active

アクティブスライドが変わったときに発生します。

inactive

アクティブスライドが非アクティブになったときに発生します。

visible

スライドがビューポートに収まって見える状態になったときに発生します。

hidden

スライドがビューポートから外れた際に発生します。

refresh

スライダーがリフレッシュされた際に発生します。

updated

オプションが更新された際、たとえば、いずれかのブレークポイントがウィンドウのリサイズによりヒットした場合などに発生します。

resize

ウィンドウのサイズが変化するたびに発生します。ネイティブのリサイズイベントそのものではなく、requestAnimationFrameによって頻度を落として配信されます。

resized

Splideがスライダーのリサイズを完了した際に発生します。

drag

ユーザがドラッグを開始した際に発生します。

dragging

ユーザがスライダーをドラッグしている際、常に発生します。

dragged

ユーザがドラッグを終えた際に発生します。

scroll

スライダーがScrollコンポーネントによってスクロールを開始した際に発生します。このイベントは通常のトランジションでは発生しません。代わりにmoveイベントを利用してください。

scrolled

スライダーがScrollコンポーネントによってスクロールを終えた際に発生します。このイベントは通常のトランジションでは発生しません。代わりにmovedイベントを利用してください。

overflow

ブラウザのリサイズなどによって、スライドの幅の合計がリスト要素の幅を超えたとき、あるいはその逆の両方で発生。詳しくはこのページを参照してください。

destroy

スライダーが破棄された際に発生します。

arrows:mounted

矢印が初期化された際に発生します。mount()を呼ぶ前にハンドラを登録してください。

arrows:updated

矢印の状態が更新された際に発生します。

pagination:mounted

ページネーションが初期化された際に発生します。mount()を呼ぶ前にハンドラを登録してください。

PaginationData

PaginationDataオブジェクトは、次のようなプロパティを持っています。

PaginationItem

このPaginationItemは、それぞれのボタンに対する以下のようなプロパティを保持しています。

pagination:updated

ページネーションの状態が更新された際に発生します。

navigation:mounted

isNavigationが設定されたスライダーが初期化された際に発生します。mount()を呼ぶ前にハンドラを登録してください。

autoplay:play

自動再生が始まった際に発生します。

autoplay:pause

自動再生が中断された際に発生します。

autoplay:playing

自動再生のタイマーが更新中、常に発生します。

lazyload:loaded

LazyLoadコンポーネントが画像をロードするたびに発生します。