jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（コールバック関数編）

2023.03.29

WEB

Webデザイン

過去2回に渡りjQueryプラグイン「bxSlider」の基本的な使い方についてご紹介してきました。

今回は実践編の最後で少し触れたコールバック関数の具体的な使い方についてご紹介したいと思います。

INDEX

コールバック関数とは？
bxSliderで利用できるコールバック関数について
bxSliderのコールバック関数を使ってみる
さいごに

コールバック関数とは？

実践編でご紹介したbxSliderのオプションにコールバック関数を指定するコードをもう一度確認してみます。

<script>
  $(document).ready(function(){
    $('#slider').bxSlider({
      pager: true,
      buildPager: (n) => {
          return '<span>' + (n + 1) + '</span>'
      },
      controls: false,
    });
  });
</script>

上記のように buildPager オプションに関数を指定することで、 <span> タグに囲まれた数字の連番をページャに利用できるようになりました。このオプションに指定された関数のことをコールバック関数と呼びます。

ここでMDNのドキュメントの説明をお借りします。

コールバック関数とは、引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。Callback function (コールバック関数)

「引数として他の関数に渡され」とありますが、bxSliderの内部ではbuildPagerオプションに指定した関数が別の内部関数に渡されてそこで実行される、といった仕組みで動作しています。

    var populatePager = function() {
      var pagerHtml = '',
      linkContent = '',
      pagerQty = getPagerQty();
      // loop through each pager item
      for (var i = 0; i < pagerQty; i++) {
        linkContent = '';
        // if a buildPager function is supplied, use it to get pager link value, else use index + 1
        if (slider.settings.buildPager && $.isFunction(slider.settings.buildPager) || slider.settings.pagerCustom) {
          linkContent = slider.settings.buildPager(i);
          slider.pagerEl.addClass('bx-custom-pager');
        } else {
          linkContent = i + 1;
          slider.pagerEl.addClass('bx-default-pager');
        }
        // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
        // add the markup to the string
        pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
      }
      // populate the pager element with pager links
      slider.pagerEl.html(pagerHtml);
    };

上記の部分ですね。詳細は割愛しますが、興味のある方はGithubからコードを覗いてみてください。

https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js#L629

bxSliderで利用できるコールバック関数について

先ほど紹介したコードでは、 buildPager オプションにコールバック関数を指定することでページャに利用するHTMLをカスタマイズしましたが、bxSliderではスライダー全体の動作をカスタマイズするためのコールバックオプションも用意されています。

Options

「+Callbacks」のメニューから各オプションを確認できます。

プロパティ	仮引数	説明
onSliderLoad	currentIndex: 現在のスライドの順番	スライダーが完全に読み込まれた際に実行
onSliderResize	同上	スライダーがリサイズされた際に実行
onSlideBefore	$slideElement: 現在のスライドの対象となる要素 oldIndex: スライド前の順番 newIndex: スライド後の順番	スライドが実行される直前に実行
onSlideAfter	同上	スライドが実行された直後に実行
onSlideNext	同上	スライドが1つ進む直前に実行
onSlidePrev	同上	スライドが1つ戻る直前に実行

「スライダーの読み込み時」や「各スライドの前後」などに任意のコールバックを指定して動作をカスタマイズできるようになっていることがわかります。

6種類のコールバックオプションがありますが、著者の経験上、オプションが用意されていて助かったのは onSliderLoad オプションと onSlideBefore オプションの2つでしょうか。

「スライダー読み込み時」、「スライド実行前」と処理の分岐が必要になりがちなタイミングで任意の関数を差し込めるので、痒い所に手が届く仕様となっています。

bxSliderのコールバック関数を使ってみる

それでは実際に onSlideBefore オプションでコールバック関数を使ってみます。

onSlideBefore オプションのコールバックはスライドが行われる度（行われる前）に必ず実行されるので、様々なシーンで応用がききますが、

スライドの実行回数に応じて処理を行う
スライド時のグローバルな状態に応じて処理を行う
任意のスライド要素に対して処理を行う

等がよくあるユースケースではないでしょうか。

<div id="slider">
  <div class="hoge"><div class="box">slide1</div></div>
  <div><div class="box">slide2</div></div>
  <div><div class="box">slide3</div></div>
  <div><div class="box">slide4</div></div>
  <div class="hoge"><div class="box">slide5</div></div>
  <div><div class="box">slide6</div></div>
  <div><div class="box">slide7</div></div>
  <div><div class="box">slide8</div></div>
  <div class="hoge"><div class="box">slide9</div></div>
  <div><div class="box">slide10</div></div>
</div>

今回は「任意のスライド要素に対して処理を行う」のサンプルとして、上記のような #slider 要素に対してbxSliderを実行し、スライド要素に .hoge クラスが付与されている場合は console.log() でログを出力してみます。

<script>
  $(document).ready(function(){
    $('#slider').bxSlider({
      pager: true,
      controls: true,
      onSlideBefore: ($slideElement, oldIndex, newIndex) => {
        if ($slideElement.hasClass('hoge')) {
          console.log('hoge!');
        }
      },
    });
  });
</script>

上記のように、コールバック関数の中に条件を入れることで各スライド要素の判定を行うことができます。第一引数にはスライド要素（jQueryでラップされた要素）が渡されますので、簡単に条件分岐を行うことが可能です。

上の例では4回目、8回目、10回目のスライド時に console.log() が実行されます。簡単ですね！

onSlideBefore では第二引数と第三引数でスライド時の順番（何番目の要素か）も取得できますので、さらに順番で条件を絞ることも可能です。

<script>
  $(document).ready(function(){
    $('#slider').bxSlider({
      pager: true,
      controls: true,
      onSlideBefore: ($slideElement, oldIndex, newIndex) => {
        if ($slideElement.hasClass('hoge')) {
          if (newIndex === 4 || newIndex === 8) {
            console.log('hoge!');
          }
        }
      },
    });
  });
</script>

このように条件を追加することで4回目、8回目のスライド時のみ console.log() が実行されるようになります（10回目のスライドでは出力をスキップ）。簡単ですね！！

コールバック関数の仮引数には「古い順番」と「新しい順番」の両方を受けとれる仕様となっています。せっかくなので両方使った分岐も追加してみます。

<script>
  $(document).ready(function(){
    $('#slider').bxSlider({
      pager: true,
      controls: true,
      onSlideBefore: ($slideElement, oldIndex, newIndex) => {
        if ($slideElement.hasClass('hoge')) {
          if (newIndex === 4 || newIndex === 8) {
            if (oldIndex < newIndex) {
              console.log('hoge!');
            }
          }
        }
      },
    });
  });
</script>

これで4回目、8回目のスライド時、かつ、スライドが前に進んだときのみ console.log() が実行されるようになります。
簡単ですね！！！

各引数を使った条件分岐でコールバック関数を実行するサンプルを紹介しました。

実際にはもっと他の条件（スライド内の特定の要素で判定とか、スライダー外の任意の要素との連動とか）と組み合わせることになる場合もありますが、原則として考え方は上記の例の応用で対応できる場合がほとんどです。

アイデア次第で様々なカスタマイズが実現可能ですので色々チャレンジしてみてください。

さいごに

いかがでしたでしょうか。bxSliderのコールバックオプションとコールバック関数に関するご紹介でした。

bxSliderだけでなくJavaScriptに関する知識も必要になってきますが、コールバック関数を利用することでプラグインのカスタマイズ範囲は飛躍的に拡大していきます。慣れるまではカスタマイズに戸惑うかもしれませんが、上の例のように簡単なものから順番に試していけば理解は深まりますので、臆せず挑戦していきましょう。

この記事を書いた人

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。