jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（実践編）

2023.03.17

WEB

Webデザイン

前回の記事、「jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編）」ではCDNを利用してbxSliderを導入する方法をご紹介しました。

今回は引き続き、bxSliderの基本的な使い方についてご紹介していきたいと思います。

INDEX

jQueryプラグイン「bxSlider」でカルーセル対応
ページコントロールの指定方法
ページャの指定方法
さいごに

jQueryプラグイン「bxSlider」でカルーセル対応

スライダーの活用方法は様々ですが、お客様からのご要望で一番多いのは「サイトのメインビジュアルをスライドショーのように切り換えたい」というものです。（※当社実績）

例：天竜厚生会様サイト

「カルーセルスライダー」などと呼ばれたりもするもので、遊園地にあるメリーゴーランドが名前の由来だとかなんとか。

見せ方はデザインによって様々ですが、弊社では上記のように横幅いっぱいに画像を配置し、画像が複数枚あることが視覚的にわかるようにページコントロールやページャを画像の左右や下部に配置する形でご提案する機会が多いです。

※当記事での『ページコントロール』は「前へ」または「次へ」移動するためのもので、上記画像では左右に配置される矢印のことを指し、『ページャ』は各スライドに移動するためのもので、上記画像では下部にスライドの数だけ表示される丸印のことを指しています。

ページコントロールやページャはカルーセルスライダーを導入する際にはかかせないものですが、bxSliderプラグインではオプションを指定することで簡単に実装することが可能です。

ページコントロールの指定方法

まずはページコントロールのオプションから見ていきましょう。

Options

bxSliderの公式サイトに指定できるオプションがまとめられていますが、その中でも著者がよく使うものは下記の3つになります。

プロパティ	初期値	説明
controls	true	ページコントロール利用の有無
nextText	‘Next’	次へ進むコントロールに表示する文字列
prevText	‘Prev’	前へ戻るコントロールに表示する文字列

controls オプションはページコントロールを利用する際に指定します。デフォルトで有効になっているのでこちらは省略可能です。
nextText と prevText オプションは各コントロールに表示する文字列を指定します。bxSliderのデフォルトのCSSでは文字列が表示されないように調整されていますが、オプションから文字列の変更も可能です。

bxSliderデフォルトのCSSを変更すると矢印アイコンではなく、「Prev」、「Next」と書かれたリンクが表示されるのがわかります。これはデフォルトの文字列が指定された状態です。

<script>
  $(document).ready(function(){
    $('#slider').bxSlider({
      pager: false,
      controls: true,
      prevText: '前へ',
      nextText: '次へ',
    });
  });
</script>

prevText 、 nextText オプションにそれぞれ文字列を指定すると

このように「前へ」「次へ」と文字列が変更されました。 CSSで調整してしまうことが多いので利用機会は少ないかもしれませんが、明示的に指定できることを覚えておくとデバッグや複雑なカスタマイズを行う際に捗ります。

ページャの指定方法

続いてはページャの指定方法です。こちらもオプションでカスタマイズ可能となっていますが、もともと丸印の記号を表示させるだけのシンプルな仕様で済むケースが多いので利用する機会はあまりないかもしれません。
著者が使う（使った記憶がある）オプションは下記の2つです。

プロパティ	初期値	説明
pager	true	ページャ利用の有無
buildPager	null	ページャ要素に利用するHTMLを返すコールバック関数

pager オプションはページャを利用する際に指定します。ページコントロール同様、デフォルトで有効になっているのでこちらも省略可能です。ページャが不要な場合は false を指定してください。

bxSliderのデフォルトのCSSが適用されると上記のような表示になります。大きさや色、配置はCSSのみで調整が可能なので、特にオプションを変更しなくても対応可能なケースがほとんどではないかと思います。

buildPager オプションにはコールバック関数というものを指定することが可能です。コールバック関数は通常のオプション指定とは異なり、値ではなく実行可能な関数を設定することで、オプションを動的にカスタマイズすることが可能となります。
詳しくはまた別の記事で紹介したいと思います。

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

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

コールバック関数の仮引数には表示対象となるスライダー要素に関する情報が渡されますので、仮引数の値をもとに関数が返す文字列を工夫することで様々なカスタムページャを作ることができます。複雑な要望に対応したければ必須なオプションとなりますのでぜひ覚えておきましょう。

さいごに

いかがでしたでしょうか。
カルーセルスライダー実装時に必要となるページコントロールとページャに関するオプションについてご紹介しました。

前回の記事でもお伝えした通り、bxSliderはとても優秀なプラグインですので簡単な設定でスライダーの実装が実現できますが、最後に紹介したコールバック関数等を組み合わせることでかなり柔軟なカスタマイズも可能となっています。

次回はコールバック関数についてもっと具体的にご紹介できればと思います。

この記事を書いた人

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