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

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

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

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

例：天竜厚生会様サイト

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

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

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

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

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

• Options

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

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

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

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

ページャの指定方法

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

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

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

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

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

さいごに

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

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

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

この記事を書いた人

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

企画・営業部を経て、システムエンジニア、マークアップエンジニアとして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を利用して簡単にアイコンの色を変えてみよう