[JS]レスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

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

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

1 bxSlider のダウンロード
2 bxSlider の設置
3 bxSlider の基本的な使い方
4 画像の切り替えをフェードインにする
5 スライドショーを自動再生する
6 スライドショーにキャプションを付ける
7 カルーセル

bxSlider のダウンロード

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

The Responsive jQuery Content Slider

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>

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

スポンサード