jQuery ベースのコンテンツスライダーには色々ありますが、今回紹介させていただくbxSliderは設置が簡単で、自動再生やフェードインによる画像切り替えなどのカスタマイズも手軽にできる便利なプラグインです。
また、レンスポンシブWEBデザイン対応なのでスマフォやタブレットでも使える所も嬉しいですね。
bxSliderのダウンロード
以下からbxSliderのファイルをダウンロードできます。The Responsive jQuery Content Slider
bxSliderの設置
jquery.bxslider.min.jsファイルとjQueryファイル、CSSファイルを<head>内に設置します。|
1 2 3 4 5 6 7 8 |
<link href="./bxslider/jquery.bxslider.css" rel="stylesheet" /> <script src="./jquery.min.js"></script> <script src="./bxslider/jquery.bxslider.min.js"></script> <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> |
※jquery.bxsliderのファイルを展開すると、画像ファイルやプラグインファイルが同梱されていますので、bxslider/のようなフォルダを作ってまとめてリモートにアップされることをオススメします。
bxSliderの基本的な使い方
基本的な使い方ですが、スライドさせたい要素をul class="bxslider"でマークアップします。
|
1 2 3 4 5 6 |
<ul class="bxslider"> <li><img src="./images/bxslider01.jpg" /></li> <li><img src="./images/bxslider02.jpg" /></li> <li><img src="./images/bxslider03.jpg" /></li> <li><img src="./images/bxslider04.jpg" /></li> </ul> |
まずは以下に基本的な bxSliderのサンプルを用意しました。
bxSliderのスライドデモ
画像の切り替えをフェードインにする
続いてカスタマイズですが、画像を左右にスライドして切り替えるのではなく「フェードイン」に変更したい場合は、オプションmode:'fade'を設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'fade' }); }); </script> <ul class="bxslider"> <li><img src="./images/bxslider01.jpg" /></li> <li><img src="./images/bxslider02.jpg" /></li> <li><img src="./images/bxslider03.jpg" /></li> <li><img src="./images/bxslider04.jpg" /></li> </ul> |
以下にフェードインで画像が切り替わるサンプルを用意しています。
フェードインで画像を切り替える bxSliderデモ
スライドショーを自動再生する
自動で画像を切り替える場合は、オプションauto: trueを設定します。pause: 4000（初期値）を変更することで切り替えの時間を調整することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, pause: 4000 }); }); </script> <ul class="bxslider"> <li><img src="./images/bxslider01.jpg" /></li> <li><img src="./images/bxslider02.jpg" /></li> <li><img src="./images/bxslider03.jpg" /></li> <li><img src="./images/bxslider04.jpg" /></li> </ul> |
以下、自動再生のスライドサンプルです。
自動再生でスライドする bxSliderデモ
スライドショーにキャプションを付ける
captions: trueを設定するだけで、画像の下部にキャプションを付けることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ captions: true }); }); </script> <ul class="bxslider"> <li><img src="./images/bxslider01.jpg" title="caption1です。" /></li> <li><img src="./images/bxslider02.jpg" title="caption2です。" /></li> <li><img src="./images/bxslider03.jpg" title="caption3です。" /></li> <li><img src="./images/bxslider04.jpg" title="caption4です。" /></li> </ul> |
img タグにtitleを設定することで、titleの文言をキャプションとして表示させることができます。
キャプション付きの bxSliderデモ
カルーセル
bxSliderではカルーセルも利用できます。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ minSlides: 2, maxSlides: 2, slideWidth: 320, slideMargin: 10 }); }); </script> <ul class="bxslider"> <li><img src="./images/bxslider01.jpg" /></li> <li><img src="./images/bxslider02.jpg" /></li> <li><img src="./images/bxslider03.jpg" /></li> <li><img src="./images/bxslider04.jpg" /></li> </ul> |
minSlides、maxSlidesの値に応じてslideWidthやslideMarginを調整してみましょう。
こんな感じでスライドします。↓
bxSliderでのカルーセル デモ
コメント