jQueryプラグイン「bxSlider」に関する連載も4回目となりました。

• 前回までの記事
• jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編）
• jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（実践編）
• jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（コールバック関数編）

今回は前記事のコールバック関数と同じく、知っているとカスタマイズの夢が広がる「パブリックメソッド」の具体的な使い方についてご紹介したいと思います。 前回同様、JavaScriptの基礎的な知識が多少必要となるところもありますがお付き合いください。

パブリックメソッドとは？

具体的な定義は見つけられませんでしたが、読んで字のごとく、「公開されているメソッド」のことで、プラグインが公式に公開している機能（メソッド）のこと、という理解で良いかと思います。

前記事では「コールバック関数」によってプラグインの処理を拡張する方法をご紹介しましたが、「パブリックメソッド」でも同じように、公開されているメソッドを活用してプラグインを拡張することが可能です。

「メソッド」と「関数」の違いについてここでは詳しくは言及しません。下記のように詳しく説明されている記事がありますので気になる方は調べてみてください。

• JavaScriptのメソッドと関数の違いを現役エンジニアが解説【初心者向け】

bxSliderで利用できるパブリックメソッドについて

それではbxSliderで利用できるパブリックメソッドについて、公式サイトの一覧を見ていきましょう。

• Options

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

「コールバック関数」の時と同じように、スライダー全体の動作を制御するための機能が提供されています。

全10種類のパブリックメソッドがありますが、カスタマイズする上で抑えておきたいものは goToSlide() メソッド、 getCurrentSlide() メソッド、 getSlideCount() メソッドの3つでしょうか。

この3つのメソッドの使い方を覚えておけば、スライダーの基本動作はある程度制御できるようになります。（あまりないかもしれませんが）bxSliderのデフォルトオプションだけでは実現できなかったような要望にも対応できるようになる（かもしれません）のでいざという時のために覚えておきましょう。

bxSliderのパブリックメソッドを使ってみる

それでは先ほど紹介した goToSlide() メソッド、 getCurrentSlide() メソッド、 getSlideCount() メソッドの使い方を見ていきましょう。

まずはパブリックメソッドの基本的な使い方を確認します。

<script>
$(document).ready(function() {
  const $slider = $('#slider').bxSlider();
  console.log($slider.getSlideCount()); // 5
  console.log($slider.getCurrentSlide()); // 0
});
</script>

<div class="wrap">
  <div id="slider">
    <div><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><div class="box">slide5</div></div>
  </div>
</div>

スライド要素が5つのリストに対してスライダーを実行し、パブリックメソッドを利用してみました。

<script>
// 👇スライダーのインスタンスを変数に格納
const $slider = $('#slider').bxSlider();
// 👇スライドの数をログに出力
console.log($slider.getSlideCount()); // 5
// 👇現在表示されているスライドの順番をログに出力
console.log($slider.getCurrentSlide()); // 0
</script>

パブリックメソッドを使うには、スライダーの対象となる要素（インスタンス）を変数に保存する必要があります。今回は $slider 変数に格納しました。

あとは変数をもとにパブリックメソッドを利用していきます。
本例ではスライド要素を5つ用意しましたので $slider.getSlideCount() と実行することでログに 5 が、スライダー開始時点では1つめの要素が表示されていますので $slider.getCurrentSlide() と実行することでログに 0 が出力されます。簡単ですね！

bxSliderのパブリックメソッド実践

パブリックメソッドの使い方がわかったところで、もう少し実践的な例を見てみましょう。今回はデフォルトのオプションで利用可能なページャをパブリックメソッドを利用して自分で用意しました。合わせて、スライドの総数と現在の表示順序がわかるカウンターも用意しています。

上記のような、スライダー、ページャ、カウンターの3つの要素を持ったシンプルな構造を例に実装を確認していきます。

<script>
$(document).ready(function() {
  const $current = $('#current');
  const $total = $('#total');

  const setCurrent = (n) => {
    $current.text(n);
  };

  const setTotal = (n) => {
    $total.text(n);
  };

  const $slider = $('#slider').bxSlider({
    pager: false,
    controls: false,
  });

  $('#my-pager li').on('click', function () {
    const index = $(this).index();
    $slider.goToSlide(index);
    setCurrent(index + 1);
  });

  setTotal($slider.getSlideCount());
  setCurrent($slider.getCurrentSlide() + 1);
});
</script>

<div class="wrap">
  <div id="slider">
    <div><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><div class="box">slide5</div></div>
  </div>

  <ul id="my-pager">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>

  <ul id="counter">
    <span id="current"></span> / <span id="total"></span>
  </ul>
</div>

HTMLとJavaScriptのソースコードは上記のようになります。ちょっと長くなりましたが、仕組みは簡単ですので順番に見ていきましょう。

const $current = $('#current');
const $total = $('#total');

const setCurrent = (n) => {
  $current.text(n);
};

const setTotal = (n) => {
  $total.text(n);
};

↑上記は変数の定義、関数の定義で、bxSliderプラグインとは直接関係ありません。普通のJavaScriptの記述ですね。

const $slider = $('#slider').bxSlider({
  pager: false,
  controls: false,
});

↑スライダー要素を変数に格納しています。プラグインにオプションを渡していますが、パブリックメソッドの使い方で説明したものと基本的には同じです。今回はgoToSlide()メソッドでページャを自作するのでページコントロールとページャオプションを無効にしました。

$('#my-pager li').on('click', function () {
  // 👇リスト要素の順番を取得
  const index = $(this).index();
  // 👇クリック時にリストの順番までスライドを移動 
  $slider.goToSlide(index);
  // 👇カウンター内の文字を変更
  setCurrent(index + 1);
});

↑独自ページャのために用意したHTMLに対してクリックイベントを設定していきます。このリストの各要素がページャの役割を果たします。

まずはクリックされた要素がリスト内で何番目にあるのかを取得します。これはjQueryの index() メソッドを使えば簡単に取得可能です。

次にbxSliderのパブリックメソッド、 $slider.goToSlide(index) で取得した順番までスライドを移動します。今回は簡単なサンプルなのでそのまま取得した順番を渡していますが、 getCurrentSlide() メソッドと組み合わせて「現在表示されている要素だったら処理をスキップ」等、細かい制御を追加するとスライダーのクオリティがあがりますので試してみてください。

最後に移動後の順番でカウンター内の文字を更新します。取得した順番は0から始まる数字になっているので +1 して調整しました。

簡単ですがパブリックメソッドを利用してページャを自作するサンプルを紹介しました。

紙面の都合上？HTMLのみのページャのご紹介となりましたが、スライド要素に合わせたサムネイル画像をページャの代わりに使ったり、スライドの順番にロジックを入れたりと、応用次第では様々なカスタマイズが可能になります。 上記の処理の流れが基本になりますのでぜひアレンジを楽しんでみてください。

さいごに

いかがでしたでしょうか。bxSliderのパブリックメソッドに関するご紹介でした。

前回のコールバック関数と今回のパブリックメソッドを活用すれば、ある程度のカスタマイズ要望には対応できるようになるのではないかと思います。bxSliderの知識だけでなく、JavaScriptの知識も多少は必要になりますが、特に実務で使う場合は学習コストに見合ったリターンがあると著者は感じています。

上記サンプルがスライダーカスタマイズのお役に立てれば幸いです。

この記事を書いた人

なかもとソリューション事業部 マークアップエンジニア

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

この執筆者の最新記事

この執筆者の記事一覧

• 2024年3月21日WEBCSSでもifが使いたい！:has()擬似クラスを使ってCSSセレクタに条件分岐を書く方法
• 2024年1月26日WEBjQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（Tickerモード編）
• 2023年11月28日WEBjQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（カルーセルスライダー編）
• 2023年8月16日WEBCSSのmask-imageプロパティとSVGを利用して簡単にアイコンの色を変えてみよう