Events

イベントリファレンス

ハンドラの登録

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

var splide = new Splide( '.splide' ).mount();
splide.on( 'move', function () {
// 何かの処理
} );
JavaScript

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

ready

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


click

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

SlideSlideComponent

クリックされたスライドを含むSlideコンポーネント

eMouseEvent

MouseEventオブジェクト


move

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

newIndexnumber

新しくアクティブになるスライドのインデックス

prevIndexnumber

前にアクティブだったスライドのインデックス

destIndexnumber

移動対象となるスライドのインデックス。ループモードではクローンも対象となるため、マイナスのインデックスや、スライド数以上のインデックスになることがある


moved

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

newIndexnumber

新しくアクティブになるスライドのインデックス

prevIndexnumber

前にアクティブだったスライドのインデックス

destIndexnumber

移動対象となるスライドのインデックス。ループモードではクローンも対象となるため、マイナスのインデックスや、スライド数以上のインデックスになることがある


active

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

SlideSlideComponent

アクティブになったSlideコンポーネント


inactive

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

SlideSlideComponent

非アクティブになったSlideコンポーネント


visible

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

SlideSlideComponent

見える状態になったSlideコンポーネント


hidden

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

SlideSlideComponent

ビューポートから外れたSlideコンポーネント


refresh

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


updated

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

optionsOptions

最新のオプションが格納されたオブジェクト


resize

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


resized

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


drag

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


dragging

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


dragged

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


scroll

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


scrolled

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


overflow

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


destroy

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


arrows:mounted

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

prevHTMLButtonElement

「前へ」の矢印

nextHTMLButtonElement

「次へ」の矢印


arrows:updated

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

prevHTMLButtonElement

「前へ」の矢印

nextHTMLButtonElement

「次へ」の矢印

prevIndexnumber

一つ前のインデックス

nextIndexnumber

現在のインデックス


pagination:mounted

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

dataPaginationData

ページネーションのデータが格納されたオブジェクト(下記参照)

itemPaginationItem

現在アクティブなボタンのデータが入ったオブジェクト(下記参照)

PaginationData

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

listHTMLUListElement

ページネーションのルートであるUL要素

itemsPaginationItem[]

PaginationItemオブジェクトからなる配列

PaginationItem

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

liHTMLLIElement

リスト要素

buttonHTMLButtonElement

リスト要素の中にあるボタン要素

pagenumber

対応しているページインデックス


pagination:updated

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

dataPaginationData

ページネーションのデータが格納されたオブジェクト(上記参照)

prevPaginationItem

前にアクティブだったボタンのデータ(上記参照)

currPaginationItem

アクティブになったボタンのデータ(上記参照)


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

splidesSplide[]

コントロール対象となるSplideのインスタンスが入った配列


autoplay:play

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


autoplay:pause

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


autoplay:playing

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

ratenumber

現在の進捗を0~1の割合で提供


lazyload:loaded

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

imgHTMLImageElement

ロードが完了した画像要素

SlideSlideComponent

ロードが完了した画像を含むSlideコンポーネント