APIs

APIリファレンス

クラスプロパティ

`defaults`

defaults: Options

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

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

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

`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

const splide = new Splide( '.splide' );


if ( splide.state.is( Splide.STATES.IDLE ) ) {
  // 何かの処理
}

インスタンスプロパティ

`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

const splide = new Splide( '.splide' );
splide.mount();


const { Autoplay } = splide.Components;
Autoplay.pause();

`state`

readonly state: StateObject

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

`splides`

readonly splides: SyncTarget[]

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

`splide`	`Splide`	同期対象のSplideインスタンス
`isParent`	`boolean \| undefined`	上の同期対象となるインスタンスが親の場合`true`

`options`

options: Options

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

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

const splide = new Splide( '.splide' ).mount();

splide.options = {
  perPage: 4,
};
JavaScript

const splide = new Splide( '.splide' ).mount();


splide.options = {
  perPage: 4,
};

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

// typeは読み取り専用ですので、変更しないでください
splide.options = { type: 'fade' };

// 直接値を書き換えることも避けてください
splide.options.perPage = 4;
JavaScript

// typeは読み取り専用ですので、変更しないでください
splide.options = { type: 'fade' };


// 直接値を書き換えることも避けてください
splide.options.perPage = 4;

`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

const primary   = new Splide( '#primary' );
const secondary = new Splide( '#secondary' );


primary.sync( secondary );
primary.mount();
secondary.mount();

引数

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

返値

this

`go`

go( control: number | string ): this

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

`i`	スライド`i`に移動する
`'+${i}'`	スライドインデックスを`i`増加させる
`'-${i}'`	スライドインデックスを`i`減少させる
`'>'`	次のページに移動する
`'<'`	前のページに移動する
`'>${i}'`	ページ`i`に移動する

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

const splide = new Splide( '.splide' );
splide.mount();

// スライド1に移動:
splide.go( 1 );

// 現インデックスに2足したスライドに移動:
splide.go( '+2' );

// 次のページに移動:
splide.go( '>' );

// ページ2に移動:
splide.go( '>2' );
JavaScript

const splide = new Splide( '.splide' );
splide.mount();


// スライド1に移動:
splide.go( 1 );


// 現インデックスに2足したスライドに移動:
splide.go( '+2' );


// 次のページに移動:
splide.go( '>' );


// ページ2に移動:
splide.go( '>2' );

引数

`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

const splide = new Splide();


// 一つのイベントに対してハンドラを追加:
splide.on( 'move', () => {} );


// 複数のイベントに対してハンドラを追加:
splide.on( 'move resize', () => {} );


// ネームスペースを付けてハンドラを追加:
splide.on( 'move.myNamespace resize.myNamespace', () => {} );

引数

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

返値

this

`off`

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

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

const splide = new Splide( '.splide' );

// "move"イベントに登録されたすべてのハンドラを削除します:
splide.off( 'move' );

// 指定されたネームスペースに所属するハンドラのみを削除します:
splide.off( 'move.myNamespace' );
JavaScript

const splide = new Splide( '.splide' );


// "move"イベントに登録されたすべてのハンドラを削除します:
splide.off( 'move' );


// 指定されたネームスペースに所属するハンドラのみを削除します:
splide.off( 'move.myNamespace' );

引数

`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

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 );

引数

`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

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 );

引数

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

返値

this

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

`is`

is( type: string ): boolean

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

const splide = new Splide( '.splide' );
splide.mount();

if ( splide.is( 'loop' ) ) {
  // 何かの処理
}
JavaScript

const splide = new Splide( '.splide' );
splide.mount();


if ( splide.is( 'loop' ) ) {
  // 何かの処理
}

引数

`type`	確認対象のタイプを指定

返値

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

`refresh`

refresh(): this

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

返値

this

`destroy`

destroy( completely?: boolean ): this

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

引数

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

返値

this