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

手軽にコンテンツスライダーを実装することができるjQueryプラグイン「bxSlider」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させる方法です。

「bxSlider」の基本的な実装方法をはじめ、各オプションやコールバックに関しては省略するので下記公式サイトで確認してください。

jQuery Content Slider | Responsive jQuery Slider | bxSlider

スライド総数と現在何枚目が表示されているか表示させたイメージ

上のイメージのように現在のスライド数 / スライド総数というカウント表示を実装します。
今回紹介する方法はHTMLは特にこれといった記述はせずに単純なulとliを使って記述したもので実装可能で、カウント表示させる部分もjQueryを使って生成しています。
実装にはbxSliderのオプションとして用意されているコールバックなどを用いる形で下記のように記述をします。

jQuery

$(function() {
  $('#slider').after('<div id="slide-counter"><span></span> / </div>');
  var slider = $('#slider').bxSlider({
    auto: true,
    pager: false,
    onSliderLoad: function(currentIndex) {
      $('#slide-counter span').text(currentIndex + 1);
    },
    onSlideBefore: function($slideElement, oldIndex, newIndex) {
      $('#slide-counter span').text(newIndex + 1);
    }
  });
  $('#slide-counter').append(slider.getSlideCount());
});

2行目の.after()でまずスライダー下にカウント表示させる部分を生成し、その中に現在何枚目なのかを表示させるための要素（このサンプルコードの場合はspan）を用意しておきます。
13行目では.append()で先ほど生成したカウント表示の部分へbxSliderのオプションで用意されているgetCurrentSlideを使ってスライド総数を表示させます。
あとは、コールバックとして用意されているonSliderLoadとonSlideBeforeを使って現在何枚目が表示されているかを#slide-counter spanの部分に表示・カウント変動するようにし、CSSで見栄えを整えるなどすれば完成となります。

実際の動きについては以下デモで確認できます。

Demo