Slides

v3用のドキュメントを参照しています

概要

Slidesコンポーネントは、クローンを含むすべてのSlideサブコンポーネントを管理します。

メソッド

`register()`

register( slide: HTMLElement, index: number, slideIndex: number ): void

スライド要素を新規で登録し、Slideオブジェクトを作成します。

引数

`slide`	登録するスライド要素
`index`	スライドのインデックス
`slideIndex`	クローンの場合は、対応するスライドのインデックスを、そうでない場合は`-1`を指定

`get()`

get( excludeClones?: boolean ): SlideComponent[]

すべてのSlideオブジェクトを含む配列を返します。

引数

`excludeClones`	クローンを除外するかどうかを決める

返値

Slideオブジェクトを含む配列

`getIn()`

getIn( page: number ): SlideComponent[]

与えられたページに含まれるSlideオブジェクトを配列で返します。

引数

`page`	ページインデックス

返値

与えられたページに含まれるSlideオブジェクトを含む配列

`getAt()`

getAt( index: number ): SlideComponent | undefined

与えられたインデックスに該当するSlideオブジェクトを返します。

引数

`index`	スライドインデックス

返値

該当するSlideオブジェクト、またはundefined

`add()`

add( slide: string | Element | Array<string | Element>, index?: number ): void

指定したインデックスに新たなスライドを挿入します。複数追加するには配列を利用してください。

// HTMLで挿入
add( '<li class="splide__slide"></li>' );

// エレメントを挿入
const slide = document.createElement( 'li' );
slide.classList.add( 'splide__slide' );
add( slide );
JavaScript

// HTMLで挿入
add( '<li class="splide__slide"></li>' );


// エレメントを挿入
const slide = document.createElement( 'li' );
slide.classList.add( 'splide__slide' );
add( slide );

引数

`items`	スライドのHTML、エレメントまたはそれらを含む配列
`index`	省略可。スライドを挿入するインデックス。省略すると、最後に追加される

`remove()`

remove( matcher: SlideMatcher ): void

指定されたmatcherに一致するスライドを削除します。matcherにはスライドのインデックス、インデックスを含む配列、セレクタ、またはテスト関数のうちのいずれかを使用できます。テスト関数には、以下のような引数が与えられます。

`Slide`	テスト対象となる`Slide`オブジェクト
`index`	インデックス
`Slides`	現在処理しているすべての`Slide`が入った配列

remove( 0 );

// 配列を用いて削除
remove( [ 0, 1 ] );

// セレクタに一致するスライドを削除
remove( '.is-visible' );

// テスト関数に合格するスライドを削除
remove( Slide => Slide.index % 2 === 0 );
JavaScript

remove( 0 );


// 配列を用いて削除
remove( [ 0, 1 ] );


// セレクタに一致するスライドを削除
remove( '.is-visible' );


// テスト関数に合格するスライドを削除
remove( Slide => Slide.index % 2 === 0 );

引数

`matcher`	スライドのインデックス、インデックスを含む配列、セレクタ、またはテスト関数のうちのいずれか

`forEach()`

forEach( iteratee: SlidesIteratee, excludeClones?: boolean ): void

Slideオブジェクトを反復処理します。

引数

`iteratee`	各要素に対して呼ばれる関数で、引数として`Slide`オブジェクト、インデックス、処理中の`Slide`オブジェクトを含む配列をとる
`excludeClones`	省略可。クローンを処理から除外するかどうか

`filter()`

filter( matcher: SlideMatcher ): SlideComponent[]

すべてのSlideオブジェクトに対してmatcherを実行し、該当するもののみが含まれる配列を返します。matcherについては上記remove()の項を参照してください。

引数

`matcher`	スライドのインデックス、インデックスを含む配列、セレクタ、またはテスト関数のうちのいずれか

返値

matcherに合格したSlideオブジェクトを含む配列

`style()`

style( prop: string, value: string | number, useContainer?: boolean ): void

すべてのスライドに対してスタイルを適用します。

引数

`prop`	適用するプロパティ名
`value`	CSSの値
`useContainer`	省略可。スタイルをスライドに適用するか、あるいはコンテナに適用するかを決める

`getLength()`

getLength( excludeClones?: boolean ): number

スライドの全体数を返します。

引数

`excludeClones`	省略可。クローンを除外するかどうかを決める

返値

スライドの全体数

`isEnough()`

isEnough(): boolean

現在のスライド数が、perPageを上回っているかどうかを判定します。

返値

上回っている場合はtrueを、同数か、あるいは下回っているはfalseを返す