• RSS

[JS]レスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

jQuery ベースのコンテンツスライダーには色々ありますが、今回紹介させていただく「bxSlider」は設置が簡単で、自動再生やフェードインによる画像切り替えなどのカスタマイズも手軽にできる便利なプラグインです。

また、レンスポンシブWEBデザイン対応なのでスマフォやタブレットでも使える所も嬉しいですね。

bxSlider のダウンロード

以下からbxSlider のファイルをダウンロードできます。


bxSlider の設置

jquery.bxslider.min.js ファイルと jQueryファイル、CSS ファイルを <head> 内に設置します。
<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" でマークアップします。
<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' を設定します。
<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(初期値)を変更することで切り替えの時間を調整することもできます。
<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 を設定するだけで、画像の下部にキャプションを付けることができます。
<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 ではカルーセルも利用できます。
<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>

minSlidesmaxSlides の値に応じて slideWidthslideMargin を調整してみましょう。
こんな感じでスライドします。↓
bxSlider でのカルーセル デモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す