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
すべてのコンポーネントがマウントされた直後に発生します。このイベントを利用するには、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 |
---|---|
e | MouseEvent |
move
スライダーが動く直前に発生します。
newIndex | number |
---|---|
prevIndex | number |
destIndex | number |
moved
スライダーが動き終わった後に発生します。
newIndex | number |
---|---|
prevIndex | number |
destIndex | number |
active
アクティブスライドが変わったときに発生します。
Slide | SlideComponent |
---|
inactive
アクティブスライドが非アクティブになったときに発生します。
Slide | SlideComponent |
---|
visible
スライドがビューポートに収まって見える状態になったときに発生します。
Slide | SlideComponent |
---|
hidden
スライドがビューポートから外れた際に発生します。
Slide | SlideComponent |
---|
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 |
---|---|
items | PaginationItem[] |
PaginationItem
このPaginationItem
は、それぞれのボタンに対する以下のようなプロパティを保持しています。
li | HTMLLIElement |
---|---|
button | HTMLButtonElement |
page | number |
pagination:updated
ページネーションの状態が更新された際に発生します。
data | PaginationData |
---|---|
prev | PaginationItem |
curr | PaginationItem |
navigation:mounted
isNavigation
が設定されたスライダーが初期化された際に発生します。mount()
を呼ぶ前にハンドラを登録してください。
splides | Splide[] |
---|
autoplay:play
自動再生が始まった際に発生します。
autoplay:pause
自動再生が中断されt際に発生します。
autoplay:playing
自動再生のタイマーが更新中、常に発生します。
rate | number |
---|
lazyload:loaded
LazyLoadコンポーネントが画像をロードするたびに発生します。
img | HTMLImageElement |
---|---|
Slide | SlideComponent |