【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。

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

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

jQuery bxSlider：サンプル・デモ

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

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

［bxSlider］の設置方法

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

bxSlider：ダウンロード

フォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの［jquery.bxslider.min.js］とスタイルシートの「jquery.bxslider.css」の２つ。
当然ですがスタイルシートの［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］要素で記述しています。
もちろん、スライドさせたいリストは好みの数に増やしてＯＫです。

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

［bxSlider］のオプション一覧

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

General

mode: 横スライド、縦スライド、フェードイン・アウトを選べます。
指定できる値は、それぞれ 'horizontal', 'vertical', 'fade' になります。
speed: スライドのスピードをミリ秒単位で指定できます。デフォルトは '500' です。
slideMargin: スライダーのコンテンツ部のマージンを指定できます。
CSS 側でも設定可能です。
startSlide: 何番目のコンテンツを最初に表示させるか？
１枚目が '0' になり、２枚目が '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