Events
イベントリファレンス
ハンドラの登録
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 | すべてのコンポーネントがマウントされた直後に発生 |
---|---|
click | ユーザがスライドをクリックした際に発生 |
move | スライダーが動く直前に発生 |
moved | スライダーが動き終わった後に発生 |
active | アクティブスライドが変わったときに発生 |
inactive | アクティブスライドが非アクティブになったときに発生 |
visible | スライドがビューポートに収まって見える状態になったときに発生 |
hidden | スライドがビューポートから外れた際に発生 |
refresh | スライダーがリフレッシュされた際に発生 |
updated | オプションが更新された際に発生 |
resize | ウィンドウのサイズが変化するたびに発生 |
resized | Splideがスライダーのリサイズを完了した際に発生 |
drag | ユーザがドラッグを開始した際に発生 |
dragging | ユーザがスライダーをドラッグしている際、常に発生 |
dragged | ユーザがドラッグを終えた際に発生 |
scroll | スライダーがスクロールを開始した際に発生 |
scrolled | スライダーがスクロールを終えた際に発生 |
destroy | スライダーが破棄された際に発生 |
arrows:mounted | 矢印が初期化されたさいに発生 |
arrows:updated | 矢印の状態が更新された際に発生 |
pagination:mounted | ページネーションが初期化された際に発生 |
pagination:updated | ページネーションの状態が更新された際に発生 |
navigation:mounted |
|
autoplay:play | 自動再生が始まった際に発生 |
autoplay:pause | 自動再生が中断された際に発生 |
autoplay:playing | 自動再生のタイマーが更新中、常に発生 |
lazyload:loaded | LazyLoadコンポーネントが画像をロードするたびに発生 |
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();
click
ユーザがスライドをクリックした際に発生します。
Slide | SlideComponent | クリックされたスライドを含むSlideコンポーネント |
---|---|---|
e | MouseEvent |
|
move
スライダーが動く直前に発生します。
newIndex | number | 新しくアクティブになるスライドのインデックス |
---|---|---|
prevIndex | number | 前にアクティブだったスライドのインデックス |
destIndex | number | 移動対象となるスライドのインデックス。ループモードではクローンも対象となるため、マイナスのインデックスや、スライド数以上のインデックスになることがある |
moved
スライダーが動き終わった後に発生します。
newIndex | number | 新しくアクティブになるスライドのインデックス |
---|---|---|
prevIndex | number | 前にアクティブだったスライドのインデックス |
destIndex | number | 移動対象となるスライドのインデックス。ループモードではクローンも対象となるため、マイナスのインデックスや、スライド数以上のインデックスになることがある |
active
アクティブスライドが変わったときに発生します。
Slide | SlideComponent | アクティブになったSlideコンポーネント |
---|
inactive
アクティブスライドが非アクティブになったときに発生します。
Slide | SlideComponent | 非アクティブになったSlideコンポーネント |
---|
visible
スライドがビューポートに収まって見える状態になったときに発生します。
Slide | SlideComponent | 見える状態になったSlideコンポーネント |
---|
hidden
スライドがビューポートから外れた際に発生します。
Slide | SlideComponent | ビューポートから外れたSlideコンポーネント |
---|
refresh
スライダーがリフレッシュされた際に発生します。
updated
オプションが更新された際、たとえば、いずれかのブレークポイントがウィンドウのリサイズによりヒットした場合などに発生します。
options | Options | 最新のオプションが格納されたオブジェクト |
---|
resize
ウィンドウのサイズが変化するたびに発生します。ネイティブのリサイズイベントそのものではなく、requestAnimationFrame
によって頻度を落として配信されます。
resized
Splideがスライダーのリサイズを完了した際に発生します。
drag
ユーザがドラッグを開始した際に発生します。
dragging
ユーザがスライダーをドラッグしている際、常に発生します。
dragged
ユーザがドラッグを終えた際に発生します。
scroll
スライダーがScrollコンポーネントによってスクロールを開始した際に発生します。このイベントは通常のトランジションでは発生しません。代わりにmove
イベントを利用してください。
scrolled
スライダーがScrollコンポーネントによってスクロールを終えた際に発生します。このイベントは通常のトランジションでは発生しません。代わりにmoved
イベントを利用してください。
destroy
スライダーが破棄された際に発生します。
arrows:mounted
矢印が初期化された際に発生します。mount()
を呼ぶ前にハンドラを登録してください。
prev | HTMLButtonElement | 「前へ」の矢印 |
---|---|---|
next | HTMLButtonElement | 「次へ」の矢印 |
arrows:updated
矢印の状態が更新された際に発生します。
prev | HTMLButtonElement | 「前へ」の矢印 |
---|---|---|
next | HTMLButtonElement | 「次へ」の矢印 |
prevIndex | number | 一つ前のインデックス |
nextIndex | number | 現在のインデックス |
pagination:mounted
ページネーションが初期化された際に発生します。mount()
を呼ぶ前にハンドラを登録してください。
data | PaginationData | ページネーションのデータが格納されたオブジェクト(下記参照) |
---|---|---|
item | PaginationItem | 現在アクティブなボタンのデータが入ったオブジェクト(下記参照) |
PaginationData
PaginationData
オブジェクトは、次のようなプロパティを持っています。
list | HTMLUListElement | ページネーションのルートであるUL要素 |
---|---|---|
items | PaginationItem[] |
|
PaginationItem
このPaginationItem
は、それぞれのボタンに対する以下のようなプロパティを保持しています。
li | HTMLLIElement | リスト要素 |
---|---|---|
button | HTMLButtonElement | リスト要素の中にあるボタン要素 |
page | number | 対応しているページインデックス |
pagination:updated
ページネーションの状態が更新された際に発生します。
data | PaginationData | ページネーションのデータが格納されたオブジェクト(上記参照) |
---|---|---|
prev | PaginationItem | 前にアクティブだったボタンのデータ(上記参照) |
curr | PaginationItem | アクティブになったボタンのデータ(上記参照) |
navigation:mounted
isNavigation
が設定されたスライダーが初期化された際に発生します。mount()
を呼ぶ前にハンドラを登録してください。
splides | Splide[] | コントロール対象となるSplideのインスタンスが入った配列 |
---|
autoplay:play
自動再生が始まった際に発生します。
autoplay:pause
自動再生が中断された際に発生します。
autoplay:playing
自動再生のタイマーが更新中、常に発生します。
rate | number | 現在の進捗を0~1の割合で提供 |
---|
lazyload:loaded
LazyLoadコンポーネントが画像をロードするたびに発生します。
img | HTMLImageElement | ロードが完了した画像要素 |
---|---|---|
Slide | SlideComponent | ロードが完了した画像を含むSlideコンポーネント |