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

<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>

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

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

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

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

<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>

スライドごとにページネーションを表示

SplideはperPageオプションが指定されると、スライドの枚数ではなく、ページの数に応じてボタンを生成します。このページングの処理を無効化する、つまり一枚ごとにスライダーを移動させ、かつすべてのスライドに対してページネーションのボタンを表示するには、オプションでfocus: 0を指定します（このとき、perMoveオプションは必要ありません）。

上のスライダーは9枚のスライドを持っているため、ページネーションのボタンも9つ表示されています。しかし、最後の2つのボタンは単にアクティブスライドを変化させるだけですので、必要ない場合もあるでしょう。

バージョン4.1からは, omitEndオプションを有効にすることで必要最低限のページネーションにとどめ、かつ最後のページに到達した際「次へ」の矢印を無効にできます。

なお、このオプションはfixedWidth、あるいはautoWidthでも動作します。ただし、必ずfocusも一緒に与えてください。

ページ番号

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

.splide__pagination {
  counter-reset: pagination-num;
}

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

.splide__pagination {
  counter-reset: pagination-num;
}


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

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

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

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();

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

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

`list`	`HTMLUListElement`	ページネーションのルートであるUL要素
`items`	`PaginationItem[]`	`PaginationItem`オブジェクトからなる配列

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

`li`	`HTMLLIElement`	リスト要素
`button`	`HTMLButtonElement`	リスト要素の中にあるボタン要素
`page`	`number`	対応しているページインデックス