APIs

APIリファレンス

クラスプロパティ

defaults

defaults: Options

全てのインスタンスから参照される、デフォルトのオプションを設定します。

Splide.defaults = {
type : 'loop',
perPage: 3,
};
JavaScript

STATES

STATES: Record<string, number>

スライダーのステートが格納されたオブジェクトで、state#is()メソッドで使用します。MOUNTEDはすぐにIDLEに切り替わるため使用せず、代わりにIDLEを使用してください。

CREATED

インスタンスが作成された直後の状態

MOUNTED

コンポーネントがマウントされ、初期化が終わった状態(上記参照)

IDLE

アイドル状態。スライダーが動いていないときは、基本的にこの状態になる

MOVING

スライダーが動いている状態

DESTROYED

スライダーがSplide#destroy()により破棄された状態

const splide = new Splide( '.splide' );
if ( splide.state.is( Splide.STATES.IDLE ) ) {
// 何かの処理
}
JavaScript

インスタンスプロパティ

root

readonly root: HTMLElement

Splideが適用されたHTML要素を保持しています。


event

readonly event: EventInterfaceObject

EventBusコンストラクタから生成されたEventInterfaceObject型のオブジェクトで、イベントハンドラを管理しています。このプロパティには直接アクセスせず、on()off()あるいはemit()メソッドを利用してください。


Components

readonly Components: Components

拡張機能を含む、すべてのコンポーネントを保持しているオブジェクトです。

const splide = new Splide( '.splide' );
splide.mount();
const { Autoplay } = splide.Components;
Autoplay.pause();
JavaScript

state

readonly state: StateObject

スライダーの状態を管理するための、StateObject型のオブジェクトです。ステートについてはSTATESを参照してください。


splides

readonly splides: SyncTarget[]

Splide#sync()によって登録された、同期の対象となるSplideインスタンスに関するデータを保持している配列です(^3.3.1)。各要素は以下のようなプロパティをもっています。

splideSplide

同期対象のSplideインスタンス

isParentboolean | undefined

上の同期対象となるインスタンスが親の場合true


options

options: Options
get

最新のオプションを返す

set

オブジェクトを渡すと現在のオプションにマージし、updatedイベントをトリガする

オプションを変更する場合は、レスポンシブオプションのみにとどめてください。

const splide = new Splide( '.splide' ).mount();
splide.options = {
perPage: 4,
};
JavaScript

ほかの読み取り専用のオプションを変更したり、値を直接編集することは避けてください。一見うまく動作するように見える場合もありますが、その動作は保証されません。

// typeは読み取り専用ですので、変更しないでください
splide.options = { type: 'fade' };
// 直接値を書き換えることも避けてください
splide.options.perPage = 4;
JavaScript

length

length: number
get

スライドの枚数を返す


index

index: number
get

アクティブなスライドのインデックスを返す

インスタンスメソッド

mount

mount( Extensions?: Record<string, ComponentConstructor>, Transition?: ComponentConstructor ): this

インスタンスを初期化します。拡張のためのエクステンションや、トランジションコンポーネントを渡すことができます。

引数

Extensions

省略可。エクステンションの入ったオブジェクト

Transition

省略可。トランジションコンポーネント

返値

this


sync

sync( splide: Splide ): this

与えらたSplideのインスタンスと動作を同期します。このメソッドはmount()よりも先に呼ぶ必要があります。

const primary = new Splide( '#primary' );
const secondary = new Splide( '#secondary' );
primary.sync( secondary );
primary.mount();
secondary.mount();
JavaScript

引数

splide

同期するためのSplideインスタンス

返値

this


go

go( control: number | string ): this

以下のようなパターンを用いて、スライダーを移動させます。

i

スライドiに移動する

'+${i}'

スライドインデックスをi増加させる

'-${i}'

スライドインデックスをi減少させる

'>'

次のページに移動する

'<'

前のページに移動する

'>${i}'

ページiに移動する

'>''<'perPageperMoveを考慮するため、たいていの場合はこれら2つのみの使用で十分です。

const splide = new Splide( '.splide' );
splide.mount();
// スライド1に移動:
splide.go( 1 );
// 現インデックスに2足したスライドに移動:
splide.go( '+2' );
// 次のページに移動:
splide.go( '>' );
// ページ2に移動:
splide.go( '>2' );
JavaScript

引数

control

コントロールパターンを指定する

返値

this


on

on( events: string | string[], callback: AnyFunction ): this

イベントハンドラを登録します。

const splide = new Splide();
// 一つのイベントに対してハンドラを追加:
splide.on( 'move', () => {} );
// 複数のイベントに対してハンドラを追加:
splide.on( 'move resize', () => {} );
// ネームスペースを付けてハンドラを追加:
splide.on( 'move.myNamespace resize.myNamespace', () => {} );
JavaScript

引数

events

イベント名、またはスペースによって区切られた複数のイベント名。ネームスペースを付記する場合は.を使用する

callback

イベントハンドラ関数

返値

this


off

off( events: string | string[] ): this

登録されたイベントハンドラを削除します。特定のハンドラのみ削除したい場合は、ネームスペースを利用してください。

const splide = new Splide( '.splide' );
// "move"イベントに登録されたすべてのハンドラを削除します:
splide.off( 'move' );
// 指定されたネームスペースに所属するハンドラのみを削除します:
splide.off( 'move.myNamespace' );
JavaScript

引数

events

イベント名、またはスペースによって区切られた複数のイベント名。ネームスペースを付記する場合は.を使用する

返値

this


emit

emit( event: string, ...args: any[] ): this

登録されたイベントハンドラを実行します。

引数

event

実行するイベント名を指定する

args

省略可。ハンドラに渡すための可変長引数

返値

this


add

add( slides: string | HTMLElement | Array<string | HTMLElement>, index?: number ): this

指定された位置にスライドを挿入します。

const splide = new Splide( '.splide' );
splide.mount();
// HTMLを用いてスライドを挿入:
splide.add( '<li class="splide__slide"></li>' );
// エレメントを用いてスライドを挿入:
const slide = document.createElement( 'li' );
slide.classList.add( 'splide__slide' );
splide.add( slide );
JavaScript

引数

slides

スライドのエレメント、HTML、またはそれらを含む配列

index

省略可。スライドを挿入する位置。省略すると最後に追加される

返値

this

スライダーが移動している最中にこの関数を呼ばないよう注意してください。


remove

remove( matcher: SlideMatcher ): this

マッチパターンに合致するスライドを除去します。パターンには、スライドのインデックス、インデックスを含む配列、セレクタ、あるいはテスト関数のいずれかを用います。テスト関数は以下のような引数をとります。

Slide

テスト対象となるSlideコンポーネントオブジェクト

index

インデックス

Slides

処理中のSlideコンポーネントが含まれている配列

const splide = new Splide( '.splide' );
splide.mount();
// インデックス0のスライドを削除:
splide.remove( 0 );
// インデックス0と1のスライドを削除:
splide.remove( [ 0, 1 ] );
// セレクタにマッチするスライドを削除:
splide.remove( '.is-visible' );
// テスト関数に合格するスライドを削除:
splide.remove( Slide => Slide.index % 2 === 0 );
JavaScript

引数

matcher

スライドのインデックス、インデックスを含む配列、セレクタ、あるいはテスト関数

返値

this

スライダーが移動している最中にこの関数を呼ばないよう注意してください。


is

is( type: string ): boolean

スライダーのタイプを確認します。

const splide = new Splide( '.splide' );
splide.mount();
if ( splide.is( 'loop' ) ) {
// 何かの処理
}
JavaScript

引数

type

確認対象のタイプを指定

返値

与えられたタイプに現在のスライダーのタイプが一致した場合はtrueを返し、そうでない場合はfalseを返す


refresh

refresh(): this

スライダーをリフレッシュします。多くのコンポーネントは自身の再初期化を行います。

返値

this


destroy

destroy( completely?: boolean ): this

スライダーを破棄します。

引数

completely

省略可。trueの場合、breakpointsでの再マウントも行われなくなり、完全に破棄される。初期値はtrue

返値

this