Eyes, JAPAN Blog > bxSliderでスライダーを設置する

bxSliderでスライダーを設置する

Tatsuhiko Hayashi

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

今回は「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を開いてみると・・・

bxslider

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

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

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

  • このエントリーをはてなブックマークに追加

Comments are closed.