先日、大学での活動の紹介ページをリデザインしました。

今回のプラグインはそこで使ったjQueryプラグインです。

(サムネイルは公式ページののスクリーンショットです。)

bxslider

とっても簡単にスライダーが作れるプラグインです。

bxslider.com

写真だけでなく、HTML要素をスライドさせるコンテンツスライダーにもなります。

設置方法

まず、ページ右上のDownloadからファイルをダウンロードします。

jquery.bxsliderというフォルダ内にある、

• jquery.bxslider.css
• jquery.bxslider.min.js
• images(スライドするためのボタンやパンくずナビのようなもの)

を使います。

プラグイン内を触る場合はjquery.bxslider.jsの方を使うと良いかもしれません。

HTML

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/css/jquery.bxslider.css" rel="stylesheet">

これをheadに記述します。

※ファイルパスは適宜変更してください。

上記のサイトでは、画像のスライダーということで、class=”bxslider” のついたulリスト内にimgタグを入れていましたが、どうやらdivでもいいらしくて。

<div class="bxslider">
~なんかhtml~
</div>

という記述でもいけるようです。

何か順を追って説明するものなどに良いかもしれません。

JavaScript

コンテンツスライダーのプラグインを呼び出すために、以下の記述をします。

<script>
$(function(){
  $('.bxslider').bxSlider({});
}
</script>

更に、オプションを付け加える事ができるため、以下のように記述してみました。

<script>
$(function(){
  $('.bxslider').bxSlider({
      auto: false,  //自動再生
      speed: 1000, //エフェクトのスピード
      mode: 'horizontal', //エフェクトの種類
      pager:true, //ページャーの有無
      prevText: '<', //前へのテキスト
      nextText: '>' //次へのテキスト
    });
  });
</script>

他のオプションでのカスタマイズは公式ホームページを参照。

JavaScriptはbody閉じタグ前に書く方が、レンダリング速度が早いと聞きます。

head内に書いた方がいい物もあるようですが、このプラグインはbody閉じタグ前でも動きました。

ほぼコピペでできてしまう為、とても手軽でカスタマイズ性のあるプラグインでした。