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

2023.01.25

WEB

Webデザイン

web制作を行うにあたってクライアント様からよくいただく要望の1つに、「画像を何枚か切り換えたい（スライドさせたい）」というものがあります。

「CSSだけで」、「JavaScriptも使って」等々、やり方は色々ありますが、一から仕様を考えて実装を行うのはなかなか手間がかかるもの。ご予算や納期を考えると独自実装は難しいため「ライブラリ」や「プラグイン」と呼ばれる、有志の方々が無料で配布・公開してくださっているものを利用することが多いと思います。

弊社でも画像の切り替えのご要望をいただいた際には、要件や仕様に応じて「ライブラリ」や「プラグイン」を使い分けていますが、その中でもjQueryプラグインの一種である「bxSlider」をよく利用しています。

本記事ではbxSliderのインストールから初期設定まで簡単に紹介していきたいと思います。

INDEX

jQueryプラグイン「bxSlider」とは
jQueryプラグイン「bxSlider」のインストール
jQueryプラグイン「bxSlider」の基本オプション
さいごに

jQueryプラグイン「bxSlider」とは

jQueryプラグインとしてスライダー機能を提供するものは数多くありますが、その中でもかなり有名、古参のプラグインなのではないでしょうか。

* Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+

サポート対象ブラウザに「IE7」が含まれるところからその歴史の深さを垣間見ることができますね。

レスポンシブデザインに対応しており必要最低限の機能を少ないコードで提供してくれているため、非常にカスタマイズがしやすく著者は昔からお世話になってきました。
※githubを見る限りでは最新バージョン（v4.2.15）のリリースが2018年3月となっていますので、4年以上開発が止まってしまっている？のが気がかりではありますが…

jQueryプラグイン「bxSlider」のインストール

bxSliderのインストール方法については公式サイトに説明が掲載されています。

Install

大別すると、

CDNを利用する
zipファイルをダウンロードする
npmを利用する
bowerを利用する

の4つとなりますが、ここでは「The Easy Way」として紹介されているCDN形式で利用する方法を紹介します。

<html>
<head>

<!-- CSSファイルの読み込み開始 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<!-- // CSSファイルの読み込み終了 -->


<!-- JavaScriptファイルの読み込み開始 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<!-- // JavaScriptファイルの読み込み終了 -->


<!-- JavaScriptの記述開始 -->
  <script>
    $(document).ready(function(){
      $('#slider').bxSlider();
    });
  </script>
<!-- // JavaScriptの記述終了 -->

</head>
<body>

<!-- HTMLの記述開始 -->
  <div id="slider">
    <div>I am a slide.</div>
    <div>I am another slide.</div>
  </div>
<!-- HTMLの記述終了 -->

</body>
</html>

上記は公式サイトのサンプルコードを一部改変したものになります。

コード内のコメントアウトにも記述しましたが、

CSSファイルの読み込み（CDN）
JavaScriptファイルの読み込み（CDN）
JavaScriptの記述
HTMLの記述（今回はID属性を付与）

と、基本的にはこの4ステップだけでスライダーの実装が完了します。簡単ですね。
CSSファイルは必須ではありませんが、デフォルトのものを利用することで最低限の見栄えを担保することができます。追加でCSSを読み込めば独自のスタイルを当てることができますので、カスタマイズのベースにすると実装が捗ります。

今回はID属性（id=”slider”）をスライダーの対象となるDOM要素（div要素）に付与しましたが、ここは任意のものに変更可能で、クラス属性を利用しても問題ありません。

// $('#slider').bxSlider();
<div id="slider">...</div>

// $('.slider').bxSlider();
<div class="slider">...</div>

ただし、クラス属性を利用する場合、複数個所がスライダーの対象となる可能性があるため、導入の際には事前にクラス設計を怠らないようにしましょう。

jQueryプラグイン「bxSlider」の基本オプション

bxSliderはシンプルなプラグインながら豊富なオプションが用意されており、（自分でJavaScriptを記述する必要はありますが）かなり柔軟にカスタマイズに対応することが可能です。

Options

オプション全ては紹介しきれませんので、弊社でよく使っているオプションをいくつかピックアップしてみました。

プロパティ	初期値	説明
mode	horizontal	スライドエフェクトの種類、’horizontal’, ‘vertical’, ‘fade’の3種類から選択
speed	500	スライドにかかる時間（ミリ秒（1/1000秒））
infiniteLoop	true	スライドのループ可否
useCSS	true	アニメーションにCSSを利用（他CSSと干渉し動作が安定しないときはこれをfalseにすると解決するときがあります）
pager	true	ページャの可否、trueの場合はスライダー要素の数だけページャが表示されます
controls	true	コントロールの可否、trueの場合は’前へ’, ‘次へ’のコントロールが表示されます
nextText	‘Next’	‘次へ’のコントロールに表示する文字列を指定
prevText	‘Prev’	‘前へ’のコントロールに表示する文字列を指定
auto	false	スライダーの自動再生の可否
pause	4000	スライダーの自動再生時の待ち時間（ミリ秒）
minSlides	1	スライダー要素の最小表示数（カルーセル時に利用）
maxSlides	1	スライダー要素の最大表示数（カルーセル時に利用）
moveSlides	0	スライダー要素の1回のスライド数（カルーセル時に利用）
slideWidth	0	スライダー要素ごとの横幅（カルーセル時に利用）

このほかにもコールバックやライフサイクルメソッド等も用意されており、かなり痒いところに手が届く仕様となっています。各項目の詳細は公式サイトをご覧ください。

さいごに

いかがでしたでしょうか。jQueryプラグインの「bxSlider」について簡単にご紹介いたしました。

CDN形式で簡単に設置・実装できるだけでなく、オプションやコールバックメソッドを利用することでかなり細かく動作を制御できますので、ある程度のカスタマイズには対応でき、案件を選ばずに利用できるとても優秀なプラグインだと改めて感服しました。

別の機会にコールバックメソッド等を利用したカスタマイズも紹介できればと思います。

この記事を書いた人

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