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

Tips

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

今後も使う機会がありそうなので備忘録。
手軽にコンテンツスライダーを実装することができるjQueryプラグイン「「bxSlider」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させる方法です。

bxSliderの基本的な実装方法などについては下記公式サイトで確認できるので省略します。

また各オプションやコールバックに関しては下記ページで確認できます。

bxSliderにカウント表示を実装したもの

上の画像のように 現在のスライド数 / スライド総数 という感じのカウント表示を実装します。
今回紹介する方法はHTMLは特にこれといった記述はせずに単純なulliを使って記述したもので実装可能で、カウント表示させる部分も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を使ってスライド総数を表示させます。
あとは、コールバックとして用意されているonSliderLoadonSlideBeforeを使って現在何枚目が表示されているかを#slide-counter spanの部分に表示・カウント変動するようにし、CSSで見栄えを整えるなどすれば完成となります。

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

Close the search window,
please press close button or esc key.