今回は「bxSlider」というプラグインを使ってスライダーをつくってみたいと思います。

まずは本家からzipファイルをダウンロードしてきましょう。解凍して中身を見てみるとファイルがいくつか入っていますが、”jquery.bxslider.min.js”と”jquery.bxslider.cssとimagesフォルダがあれば大丈夫です。またjQueryが必要なのでこれもダウンロードしておきましょう。これらを適切な場所に配置して読み込みます。（※imagesフォルダはcssファイルと同じ階層に置いてください）

読み込んだら早速スライダーをつくっていきます。HTMLファイルをこんな感じに書きます。（画像は適当なものを用意しました）

HTML :
<ul class=”bxslider”>
<li><img src=”images/cat1.jpg” /></li>
<li><img src=”images/cat2.jpg” /></li>
<li><img src=”images/cat3.jpg” /></li>
</ul>

次にjavascriptを書きます。

JavaScript :

$(function() {
$(“.bxslider”).bxSlider();
});

ここまで書いてHTMLを開いてみると・・・

少し不格好ですがスライダーができました。

今回はオプション無しでしたが、公式ページにオプションの一覧があるので、実際にはオプションやCSSでカスタマイズして使うことになると思います。

簡単でしたが「bxSlider」の紹介でした。