概要

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

引数

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

引数

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を返す