Events

イベントリファレンス

v3用のドキュメントを参照しています

ハンドラの登録

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

click

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

SlideSlideComponent
eMouseEvent

move

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

newIndexnumber
prevIndexnumber
destIndexnumber

moved

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

newIndexnumber
prevIndexnumber
destIndexnumber

active

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

SlideSlideComponent

inactive

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

SlideSlideComponent

visible

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

SlideSlideComponent

hidden

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

SlideSlideComponent

refresh

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


updated

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

optionsOptions

resize

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


resized

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


drag

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


dragging

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


dragged

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


scroll

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


scrolled

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


destroy

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


arrows:mounted

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

prevHTMLButtonElement
nextHTMLButtonElement

arrows:updated

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

prevHTMLButtonElement
nextHTMLButtonElement
prevIndexnumber
nextIndexnumber

pagination:mounted

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

dataPaginationData
itemPaginationItem

PaginationData

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

listHTMLUListElement
itemsPaginationItem[]

PaginationItem

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

liHTMLLIElement
buttonHTMLButtonElement
pagenumber

pagination:updated

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

dataPaginationData
prevPaginationItem
currPaginationItem

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

splidesSplide[]

autoplay:play

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


autoplay:pause

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


autoplay:playing

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

ratenumber

lazyload:loaded

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

imgHTMLImageElement
SlideSlideComponent