jQueryのスライダー表示プラグイン「bxslider」

jQueryのプラグイン「bxslider」を使えば簡単にスライダーを導入する事ができます。

まず下記からダウンロード
http://bxslider.com/

ダウンロードしたファイルで下記の必要なファイルをディレクトリに移します。

・imagesフォルダ
・pluginsフォルダ
・jquery.bxslider.css
・jquery.bxslider.min.js

ヘッダー内に下記コードを読み込みます。

<!-- 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="/lib/jquery.bxslider.css" rel="stylesheet" />

次にHTMLの表記、例えば4枚のスライダーを表示したい場合
下記のようにリストにclass=”bxslider”を記述

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

最初にbxsliderを読み込んだ後にの下記のコードを記述すればbxsliderが動きます。

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