bxSlider

今日紹介する jQuery プラグイン[bxSlider]はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。

まずはサンプルをご覧ください。

jQuery bxSlider:サンプル・デモ

特徴は初心者でも簡単に設置できること、ファイル容量が小さい軽量設計、レスポンシヴ・デザイン対応で、各種スマートフォンやタブレットでも横幅に合わせてコンテンツのサイズを自動的に調整してくれること、また、画像だけでなく動画も含めた表示が可能、そしてオプション機能が豊富に用意されていることも大きな魅力の1つです。

実装方法は以下のとおり。

[bxSlider]の設置方法

最初に[bxSlider]の本体ファイルをダウンロードします。
リンクは以下より。

bxSlider:ダウンロード

フォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの[jquery.bxslider.min.js]とスタイルシートの「jquery.bxslider.css」の2つ。
当然ですがスタイルシートの[jquery.bxslider.css]は中身のコードをコピーしてメインのCSSに貼り付けてしまえば不要になります。

とりあえずサーバーの任意の場所にアップロードして、html の <head>〜</head> 内に埋め込みます。
また、ここでスライダーの設定も合わせて記述します。

<link rel="stylesheet" href="/jquery.bxslider.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" /></script>
<script src="/jquery.bxSlider.min.js"></script>
<script>
$(function(){
	 $('.bxslider').bxSlider({
		auto: true,
		slideWidth: 640,
		minSlides: 3
	});
});
</script>

とりあえず今回は「自動でスライド」「コンテンツの横幅は640px」「最小スライド数が3点」というオプションを設定してみました。

続いてメインのスライドショーになる部分の記述方法です。

<ul class="bxslider">
	<li><img src="../images/sample-01.png" width="640" height="300"></li>
	<li><img src="../images/sample-02.png" width="640" height="300"></li>
	<li><img src="../images/sample-03.png" width="640" height="300"></li>
	<li><img src="../images/sample-04.png" width="640" height="300"></li>
</ul>

リストを使った簡単なマークアップですね。ここではスライドショーの本体となる[ul]要素にクラス名[.bxslider]を指定し、スライダーで切り替えたい画像を[li]要素で記述しています。
もちろん、スライドさせたいリストは好みの数に増やしてOKです。


以上で[bxSlider]が動くようになります。
細かなデザイン部分はすべて、もともと同梱されているスタイルシート[jquery.bxslider.css]が司っています。
ページ送りやサムネイルの設定をした際には、ブラウザで「要素を検証」すると、[.bx-controls]や[.bx-pager]などのクラス名が追加された要素が吐き出されていることを確認できるので微調整してください。

[bxSlider]のオプション一覧

各オプション設定の詳細は以下のとおり。
現状のすべての項目を網羅しています。

General
mode
横スライド、縦スライド、フェードイン・アウトを選べます。
指定できる値は、それぞれ ‘horizontal’, ‘vertical’, ‘fade’ になります。
speed
スライドのスピードをミリ秒単位で指定できます。デフォルトは ‘500’ です。
slideMargin
スライダーのコンテンツ部のマージンを指定できます。
CSS 側でも設定可能です。
startSlide
何番目のコンテンツを最初に表示させるか?
1枚目が ‘0’ になり、2枚目が ‘1’ になります。
randomStart
こちらはランダムにスタートさせるか否かのプロパティ。ランダムではない ‘false’ か、ランダム表示させる ‘true’ かを指定できます。
slideSelector
スライドさせる要素を指定できます。
デフォルトの値は無し。指定する場合は ‘div.slide’ などクラス名を使うのが一般的です。
infiniteLoop
ループさせるか否か。デフォルトはループさせる ‘true’ です。
hideControlOnEnd
最後のコンテンツ部に来たときに、コントロール・オプションの「Next」を非表示にします。
easing
スライド時に CSS のイージングを適用させることができます。
‘linear’、 ‘ease’、 ‘ease-in’、 ‘ease-out’、 ‘ease-in-out’ などから指定できます。
captions
画像のキャプションを表示させることができます。キャプションは<img>タグの[title]プロパティ内に記述したものが適用されます。
ticker
継続的にスライドさせる「ティッカーモード」を有効化します。いわゆる「ニュースティッカー」として動作させたいときにこの値を ‘true’ にします。
tickerHover
「ティッカーモード」を有効化しているとき、マウスホバー時の処理を指定します。
adaptiveHeight
各スライドの高さが違う場合、それぞれを調節して合わせるかどうか。初期値は ‘false’ です。
adaptiveHeightSpeed
スライダーの高さの調節の遷移時間の設定。前項の「adaptiveHeight」が ‘true’ のときのみ有効。初期値は500です。
video
スライダーに含まれている video をレスポンシブにする場合は ‘true’ を指定します。またその際は別途[jquery.fitvids.js]を読み込む必要があります。なお同スクリプトファイルはダウンロードしたプラグインのフォルダに同梱されています。なおデフォルトの値は ‘false’ になっています。
responsive
レスポンシヴに対応するか否か。デフォルトはレスポンシヴ対応の ‘true’ です。
useCSS
スライドにCSSアニメーションを使用するかどうかの設定。初期値は ‘true’ です。
preloadImages
画像読み込みのタイミングを指定します。
‘all’ で開始前にすべての画像を読み込み、’visible’ で最初に表示される画像だけを先に読み込みます。
touchEnabled
モバイルデバイスのタッチ、スワイプに反応します。
swipeThreshold
スワイプ操作として処理される最小の移動距離。前項の touchEnabled :true のときのみ有効。初期値は ’50’ です。
oneToOneTouch
スワイプ時に要素を移動させる処理。初期値は ‘true’ です。
preventDefaultSwipeX
初期値は ‘true’。
preventDefaultSwipeY
初期値は ‘false’。
Pager
pager
ページ送りを有効化するか否か。
pagerType
ページ送りのタイプを設定。
pagerShortSeparator
前項の「pagerType」の値が ‘short’ のときの区切り線の設定。初期値は ‘ / ‘ になっています。
pagerSelector
指定した位置にページ送りを追加する。
pagerCustom
ページ送りを自分で用意する場合の設定。
buildPager
ページ送りの各中身を設定。
Controls
controls
前後のコントロールを表示させる。
nextText
nextのテキストを指定。初期値は ‘Next’。
prevText
prevのテキストを指定。初期値は ‘Prev’。
nextSelector
「next」を自分で用意する場合にjQueryセレクタで指定。
prevSelector
「prev」を自分で用意する場合にjQueryセレクタで指定。
autoControls
自動スライドのコントロールを表示する。
startText
自動スライドの「start」のテキストを指定。初期値は ‘Start’。
stopText
自動スライドの「stop」のテキストを指定。初期値は ‘Stop’。
autoControlsCombine
自動スライド時に、停止した際にコントロールボタンの表示/非表示させる設定。
autoControlsSelector
自動スライドのコントロールを自分で用意する場合にjQueryセレクタで指定。初期値は ‘null’ になっています。
Auto
auto
自動スライドの設定。
pause
自動スライドの待ち時間を指定。
autoStart
読み込み後に自動スライドを開始するかどうかを指定。
autoDirection
自動スライドの方向の指定。
autoHover
スライダーにホバーしたときに自動スライドを停止させるかどうかを指定。
autoDelay
自動スライドを開始するまでの待ち時間を指定する。
Carousel
minSlides
一度に表示させる最小数を設定。
maxSlides
一度に表示させる最大数を設定。
moveSlides
カルーセル表示のときに移動するスライド数の設定。
slideWidth
各スライドの幅を指定。
Callbacks

コールバックも各種あらかじめ用意されています。

onSliderLoad
スライダーが読み込まれた直後に実行。
onSlideBefore
スライドする直前に実行。
onSlideAfter
スライドした直後に実行。
onSlideNext
nextが実行される直前に実行。
onSlidePrev
prevが実行される直前に実行。
Public methods

コールバックも各種あらかじめ用意されています。

goToSlide
指定要素へスライドする。
goToNextSlide
nextを実行。
goToPrevSlide
prevを実行。
startAuto
自動スライドの開始。
stopAuto
自動スライドの停止。
getCurrentSlide
現在表示されているスライドを返す。
getSlideCount
スライダーのスライド要素の総数を返す。
reloadSlider
スライダーをリロードする。
destroySlider
スライダーをプラグインを読み込む前の初期状態に戻す。

以上。様々なオプションが揃っているのでカスタマイズも捗りますね。

動作も安定していますし、スライダー系の jQuery プラグインの中でも最高峰の完成度です。
いまイチ押しの[bxSlider]を、ぜひ利用してみてください。

bxSlider:ダウンロード