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

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

これらの要素に対してクラスを追加したい場合は、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自体が参照しているため削除せず、上の例のように追加のクラスと一緒に設定してください。

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

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

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`	対応しているページインデックス