Pagination

ページネーションの調整

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

クラスの追加

Splideは、ページネーションを表示するために、次のようなHTMLを生成します。

<ul class="splide__pagination">
<li>
<button
class="splide__pagination__page is-active"
type="button"
aria-controls="splide01-slide01"
aria-label="Go to slide 1"
aria-current="true"
>
</button>
</li>
<li>
<button
class="splide__pagination__page"
type="button"
aria-controls="splide01-slide02"
aria-label="Go to slide 2"
>
</button>
</li>
......
</ul>
HTML

これらの要素に対してクラスを追加したい場合は、classesオプションを使用してください。

new Splide( '.splide', {
classes: {
pagination: 'splide__pagination your-class-pagination',
page : 'splide__pagination__page your-class-page',
},
} );
JavaScript

splide__接頭子を持ったクラスはSplide自体が参照しているため削除せず、上の例のように追加のクラスと一緒に設定してください。

ページネーションのカスタマイズ

pagination:mountedイベントを用いて、それぞれのボタンをカスタマイズできます。たとえば、各ボタンに数字を追加するには次のようにします。

const splide = new Splide( '.splide' );
splide.on( 'pagination:mounted', function ( data ) {
// ULエレメントにクラスを追加できます
data.list.classList.add( 'splide__pagination--custom' );
// `items`は、すべてのLI要素とボタン要素を保持しています
data.items.forEach( function ( item ) {
item.button.textContent = String( item.page + 1 );
} );
} );
splide.mount();
JavaScript

結果、次のような番号付きのページネーションを得ることができます。

  • 01
  • 02
  • 03
  • 04
  • 05

イベントハンドラはlistitemsという2つのプロパティを持ったdataオブジェクトを受け取ります。

listHTMLUListElement

ページネーションのルートであるUL要素

itemsPaginationItem[]

PaginationItemオブジェクトからなる配列

このPaginationItemは、それぞれのボタンに対する以下のようなプロパティを保持しています。

liHTMLLIElement

リスト要素

buttonHTMLButtonElement

リスト要素の中にあるボタン要素

pagenumber

対応しているページインデックス