軽量で設置も簡単、高機能なjQueryスライドショー「bxSlider」をご紹介します。
jQueryを使ったスライドショーはいくつかありますが、中でもbxSliderは充実したオプションが特徴で、一般的な横スライド以外に縦やフェードで画像を切り替えたり、表示時間の調整、キャプションの追加、コントロールの設置などが設定できます。
wordpressにはプラグインだけで設置できるスライドショーがたくさんありますが、bxSliderがあればプラグインを使わなくてもスライドショーが設置できます。
高機能なjQueryスライドショー「bxSlider」
webサイトのトップページでよく見かけるスライドショーは、サイトのイメージやイチオシ情報を視覚的に伝えることができます。最近は高機能なjQueryスライドショーがたくさんあり、設置もそれほど難しくはありません。
サイト構築の時はjQueryスライドショーをよく使っていますが、最近はレスポンシブ対応で、スマホやタブレットでもはみ出したりせずに表示できるbxSliderがお気に入りです。
bxSliderは軽量で設置も簡単、普通にスライドショーを使うならこれで十分です。レスポンシブ対応で、スマホやタブレットでも横幅に合わせて画像のサイズを自動的に調整してくれます。
また、画像だけでなく動画も含めた表示が可能です。最近はWordPressで作ったサイトでもbxSliderを使ってますよ。
bxSliderを設置する
では、さっそくbxSliderを設置してみましょう。
まずはbxSliderの公式サイトからファイルをダウンロードします。右上の「Download」をクリックしてください。
ダウンロードしたzipファイルには、bxSlider設置のためのファイルやフォルダが入っていますが、基本的に必要なのは「jquery.bxslider.min.js」と「jquery.bxslider.css」と「images」の３つだけです。
続いて、サーバに上記３つのファイルをアップロードして、＜head＞内にファイルへのリンクを記載します。「サイトURL」の部分は、bxSliderをアップした場所に合わせて適切なパスを記載してください。
たとえばサーバーのルートに「bxslider」というフォルダを作ってファイルをアップした場合は「https://hogehoge.com/bxslider/jquery.bxslider.min.js」という感じになります。
<!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="サイトURL/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="サイトURL/jquery.bxslider.css" rel="stylesheet" />
お次は切り替える画像を指定します。bxSliderを設置したい場所に下記を記載してください。こちらもアップした場所に合わせてパスを変更します。
この場合は画像を「images」に４枚入れています。もちろん、画像は何枚でもOKです。増やした分だけ画像のパスを記載してください。
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul>
最後にbxSliderを呼び出せば、スライドショーがスタートしますが、公式ページにある呼び出しコードをそのまま使っても動かない場合があります。
$(document).ready(function(){
$('.bxslider').bxSlider();
});bxSliderを正常に動かすためには、呼び出しコードを下記のように＜script type=”text/javascript”＞＜/script＞で括ってください。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>私のwordpressサイトでは、＜script type=”text/javascript”＞＜/script＞で括ってやらないと動きませんでした。
bxSliderの動作は、下記ページで確認してください。サンプル画像は我がニャンコさまでございます。かわいいでしょ～♪
いや、親バカで申し訳ない・・・
bxSliderの設定
bxSlider公式ページには、いろいろなカスタマイズのサンプルが掲載されています。
ここを参考にして、テキストを表示させたり、縦にスクロールさせたり、サムネイルをつけたり、自分好みにアレンジしたスライドショーを作りましょう。
Optionsを設定してやると、スライド動作の選択、スライドの静止時間設定、自動再生の選択など、スライドの動きをいろいろ指定できます。
auto : スライドの自動再生を選択します。デフォルトはfalseなので、自動で切り替えるならtrueを指定します。
mode : スライドの動作を選択します。’horizontal’、’vertical’、’fade’があって、それぞれ横・縦・フェードで画像が切り替わります。デフォルトは横スライドのhorizontalです。
pause : スライドの静止時間を指定します。
speed : スライド動作の速度を指定します。
pager : ページャーを設置します。
bxSlider Options設定 記載例
下記の記載例ですが、上から自動でスライドショースタート、画像静止時間6秒、画像切り替わり時間1秒、ページャー（画像下の●●●）なし、コントローラー（左右の矢印）なし、画像切り替わりが横スライドということになります。
auto: true,
pause: 6000,
speed: 1000,
pager: false,
controls: false,
mode: ‘horizontal’,
その他のOptionsはこちらのbxSlider公式ページをご覧ください。設定項目で「options: integer」の所は数値を指定、「options: boolean (true / false)」の所はtrueかfalseのどちらかを指定します。
下記の例は、bxSliderの自動スライドショースタートと、コントローラーを付けた場合の記述です。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>続いて、bxSliderの自動スライドショースタート、縦スライドで画像切り替わりの場合です。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
mode: 'vertical',
});
});
</script>動作はこちらで確認してください。bxSliderの自動スライドショースタート、縦スライドで画像切り替わりの場合です。
bxSliderはオプションで様々な設定が可能ですが、ページ全体が英語で記載されています。
日本語の解説なら、Web Design Magazineさんが「bxSlider」のいろいろなオプションの使い方をまとめてくれてます。オプションの記述例やデモもありますよ。
bxSlider 画像にリンクを張る
bxSliderはスライドショーの画像にリンクを張るのも簡単です。特別な設定は不要で、下記のようにスライドショー画像へリンクを追記すればOKです。
<ul class="bxslider"> <li><a href="http://hogehoge.com/page1.html"><img src="/images/●●●1.jpg" /></a></li> <li><a href="http://hogehoge.com/page2.html"><img src="/images/●●●2.jpg" /></a></li> <li><a href="http://hogehoge.com/page3.html"><img src="/images/●●●2.jpg" /></a></li> </ul>
これでスライド中の各画像をクリックすると、リンク先URLに飛んで行くようになります。
これなら動く bxSlider設置の流れ
では、最後におさらいを兼ねて、bxSlider設置までの流れをもう一度見てみましょう。初心者の方でも、この通りにやれば多分動きます。
まずは公式サイトからダウンロードした「jquery.bxslider.min.js」と「jquery.bxslider.css」と「images」の3つをサーバにアップします。初心者はルートフォルダ（indexと同じ場所）にアップすればいいでしょう。
次に、「images」内にスライドショー用の画像をアップして、bxSliderを設置したい場所に下記のコードを記述します。画像のファイル名（pic1.jpg の部分）を間違えないようにしてくださいね。
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul>
最後に、＜/head＞の直前に下記のコードを記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>これでbxSliderが動くはずです。
bxSliderがIEで動かない場合の対処法
bxSliderはChromeやFirefoxで問題なく動作しても、IEだと動かない場合があります。
IEではjavascriptのコード解釈が他のブラウザと少し違うので、まずはそこをチェック、それでも動かない場合は、呼び出すjQueryのバージョンを変えてみてください。
最後に注意点ですが、jQueryを複数使用すると、バッティングして動作がおかしくなる場合があります。
実例として、ドロップダウンメニューを設置したサイトでbxSliderを使った時に、トラブルが発生しました。どちらもjQueryを使うので、見事にバッティングしたみたいです。
結局、スライドショー側のjQuery呼び出しを消すことで解決しましたが、その際はjQueryのバージョン確認をお忘れなく。
上記のbxSliderがIEで動かなかったという事例は、jQueryのバージョンを変えたことが原因でした。それでもダメな場合は下記のサイトを参考にしてみてください。
