APIs

APIリファレンス

クラスプロパティ

defaults

defaults: Options
全てのインスタンスから参照される、デフォルトのオプションを設定します。
Splide.defaults = {
type : 'loop',
perPage: 3,
};
JavaScript

STATES

STATES: Record<string, number>

スライダーのステートが格納されたオブジェクトで、state#is()メソッドで使用します。

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

インスタンスプロパティ

root

readonly root: HTMLElement

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


event

readonly event: EventBusObject

EventBusコンストラクタから生成されたEventBusObject型のオブジェクトで、イベントハンドラを管理しています。このプロパティには直接アクセスせず、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)。各要素は以下のようなプロパティをもっています。


options

options: Options

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

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

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

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

length

length: number

index

index: number

インスタンスメソッド

mount

mount( Extensions?: Record<string, ComponentConstructor>, Transition?: ComponentConstructor ): 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

go

go( control: number | string ): this

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

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

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

on

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

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

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

off

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

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

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

emit

emit( event: string, ...args: any[] ): 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( document.createElement( 'li' ) );
JavaScript

remove

remove( matcher: SlideMatcher ): this

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

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

is

is( type: string ): boolean

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

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

refresh

refresh(): this

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


destroy

destroy( completely?: boolean ): this

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