Pagination

ページネーションの調整

クラスの追加

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オブジェクトを受け取ります。

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