Pagination

ページネーションの調整

クラスの追加

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

<ul class="splide__pagination splide__pagination--ltr" role="tablist" aria-label="Select slide to show">
<li role="presentation">
<button
class="splide__pagination__page is-active"
type="button"
role="tab"
aria-controls="splide01-slide01"
aria-label="Go to slide 1"
aria-selected="true">
</button>
</li>
<li role="presentation">
<button
class="splide__pagination__page"
type="button"
role="tab"
aria-controls="splide01-slide02"
aria-label="Go to slide 2"
tabindex="-1"
>
</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自体が参照しているため削除せず、上の例のように追加のクラスと一緒に設定してください。

挿入する位置の指定

Splideはページネーションを、トラック要素の親に挿入(append)します。プレースホルダ(<ul class="splide__pagination"></ul>)を用いると、挿入位置を直接指定することができます。

<section class="splide" aria-label="プレースホルダの例">
<ul class="splide__pagination"></ul>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
<!-- 指定しない場合はここに挿入される -->
</section>
HTML

ページ番号

CSSのカウンターを使用すると、ページネーションに番号を表示することができます。

.splide__pagination {
counter-reset: pagination-num;
}
.splide__pagination__page:before {
counter-increment: pagination-num;
content: counter( pagination-num );
}
CSS

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

pagination:mountedイベントを用いて、それぞれのボタンをカスタマイズすることができます。たとえば、各ボタンに番号を追加するには次のようにします(上記CSSの方法を用いた方が簡単です)。

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
itemsPaginationItem[]

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

liHTMLLIElement
buttonHTMLButtonElement
pagenumber