WEB系キャンパス

(K)Jqueryプラグイン「bxslider」を使ってカルーセルスライダーを作成

Jquery_bxSlider

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

Comment

  1. Ishiguro より:

    jQuery超初心者です。
    読ませていただきました。
    色々な本を読んでいるのですが、どれもうまくいかず、
    「フジフーズのHPのheadの様なスライトが作りたいのですが、
    できず、必死で模索している最中に、こちらのページ、見つけました。
    早速、頑張ってみようと思ったのですが、
    まとめの上の「DEMO」が自動再生されないのはなぜでしょうか

    • Kc_fuj より:

      >Ishiguro様
      返信が遅くなって申し訳ございません。
      「DEMO」は自動再生をオンにする記述の「auto: true,」が記述できていなかったのが原因かと思われます。
      修正したDEMOをあげてますので、もしまだ未解決ならご確認下さいm(__)m

Comment Form