前回Jqueryでごく一般的なスライダーを作成しましたが、前後左右の画像を表示したままスライドするスライダーを作れと指令が下りました。調べると、このタイプのスライダーを「カルーセルスライダー」と言うようですね。

前回のJQuery Cycle Pluginでは実現できるかよくわからなかったので、今回は別のJqueryのプラグインbxsliderを使って作成することにします。レスポンシブにも対応してるんで応用も効くココ最近というか一年ぐらい前はNo.1おすすめのスライダー系プラグインだったようです。

まず一番簡単に、とりあえず動かしてみる

Jqueryとプラグインの読み込み

bxsliderのダウンロードができたら、いつも通り、＜head＞内にJqueryを読み込みます。ダウンロードしたフォルダの中にはたくさんファイルが入ってますが、設置するだけなら「jquery.bxslider.js」だけでおけです。イージング効果を付けたい場合は「plugins」内の「jquery.easing.1.3.js」も読み込まないといけません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="jquery.bxslider.css" />

ちなに、フォルダ内に入っている「jquery.bxslider.css」と「images」フォルダを読みこめば、ナビゲーションがレイアウトされます。今回はデフォルトで行かせていただきます。

次にスライドさせるためのコードを書く

「#slide」は任意で「bxslider動け！」と書く。

【javascript】

<script type="text/javascript">
  $(document).ready(function(){
    $('#slide').bxSlider();
  });
</script>

「＃」でid指定なので＜ul＞でも＜div＞でもおけ

【HTML】

<div id="slide">
<img src="img/img01.jpg">
<img src="img/img02.jpg">
<img src="img/img03.jpg">
<img src="img/img04.jpg">
</div>

自動再生が止まってしまった時の対処法

bxsliderでは、「Pager」を「Next」や「Prev」をクリックしたら、自動再生が止まる仕様になっているようなので、その指示の部分をコメントアウトする必要があります。

「jquery.bxslider.js」にある約715行目（Nextの命令）、728行目（Prevの命令）、763行目（Pagerの命令）
に書かれている

if (slider.settings.auto) el.stopAuto();

コイツを

//if (slider.settings.auto) el.stopAuto();

こんな感じでコメントアウトします。これで、どのボタンを押しても自動再生は動き続けます(・∀・)

初期設定から細かい数値設定

【Javascript】

<script type="text/javascript">
  $(document).ready(function(){
    $('#slide').bxSlider({
        auto: true,  //自動再生
        pause:    1000, //静止時間
        speed: 1000, //エフェクトのスピード
        mode: 'horizontal', //スライドの種類
        pager:true, //ページャー出すか出さないか
        prevText: '<', //前へ
        nextText: '>' //次へ
        });
  });
</script>

エフェクトの種類は以下の3つのみです。

horizontal

横スライド

vertical

縦スライド

fade

フェードイン・フェードアウト

この3種類＋先ほど読み込んだ「jquery.easing.1.3.js」のイージング効果を加えて色んなアニメーション効果をつけることが出来ます。

DEMO

まとめ

cssが梱包されてる分、レイアウトや設置が何よりめちゃくちゃ簡単なのが魅力的なプラグインです。
次回は、自分好みのレイアウトに変更していこうと思います。