slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法

使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。

slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。

現在のスライド数とスライド総数を表示させた実装イメージ

実装イメージはこのようになっており、現在のスライド数 / スライド総数という形でカウントを表示させます。（イメージは全10枚中5枚目を表示しているという状態）
デフォルトで用意されているバレットとかでも全部で何枚あり現在何枚目を表示しているかはわかりますが、よりパッと見でわかるようにしたいときやデザイン的にこのような表示にしたいとき、あとはスマートフォンなど表示領域が狭い場合にバレットやサムネイルなどがごちゃごちゃ配置されているのをどうにかしたいときの代替案のひとつとして使えるかと思います。

実装に使用するHTMLは特別これといった記述は必要なく、slickのデモサイトに掲載されている下記のようなシンプルなもので実装可能です。

<div id="slick">
  <div><img src="img01.jpg" alt=""></div>
  <div><img src="img02.jpg" alt=""></div>
  <div><img src="img03.jpg" alt=""></div>
    ・
    ・
    ・
</div>

上記HTMLを使用している想定で、次にjQueryを下記のように記述します。

jQuery

$(function() {
  $('#slick').on('init', function(event, slick) {
    $(this).append('<div class="slick-counter"><span class="current"></span> / <span class="total"></span></div>');
    $('.current').text(slick.currentSlide + 1);
    $('.total').text(slick.slideCount);
  })
  .slick({
    // option here...
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    $('.current').text(nextSlide + 1);
  });
});

まず、slickを実行する前にinitイベントを使ってカウント表示用の要素を作成します。
このサンプルコードの場合は、現在のカウントを表示する領域として、総数のカウントを表示する領域としてを.slick-counterというclassが付いたdiv要素で括り、それらをjQueryの.append()で追加しています。

ちなみに、カウント表示を括っている.slick-counterはスタイル調整などで使用する目的なので、必要なければ省略可能です。
また、ここではjQueryを使用してカウント表示用の要素を作成していますが、予めHTMLに書いておく形でも実装可能です。

その後、同じくinit時に現在の枚数をslick.currentSlide、総数をslick.slideCountでそれぞれ取得し表示されるように設定すると、この時点で初期状態でのカウント表示がされるようになります。

初期表示ができたら次はスライド切り替え時に現在のカウントが増減する動きを実装していきます。
カウント数増減の実装にはbeforeChangeというイベントを使用し、nextSlideで値を取得してきたものを.text()で現在のカウントを表示しているの中を書き換えるようにすることで、スライド切り替え時に現在のカウント数値が変わるようになります。

Demo