スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

初心者でも簡単にスライドが生成出来る。jQuery のプラグインbxsliderについて

bxsliderとは

jQueryは、javascriptのコードを簡潔な表記で実行できる人気のライブラリです。ライブラリ内の著作権表示を消さなければ、商用も含め誰でもフリーに利用できます。そんなjQueryのプラグインの一つがbxsliderです。
画像の下の●や■が切り替わるのと同時に横にスライドしていく画像や自動的に入れ替わる画像を、ちょっとお洒落なホームページで見かけたことがあるでしょう。そんな難しそうな表示を、初心者でも簡単に出来るようになるのがこのプラグインです。ファイル容量が小さいので、読み込みの負担が少ないことも嬉しいところです。また、レスポンシブデザインにも対応しており、スクリーン幅に合わせてコンテンツサイズを自動的に調整させることも可能です。

スライドの作成方法

ダウンロードしたフォルダの中にいくつかのファイルがありますが、スライドさせるだけなら以下の手順だけで可能となります。
まず、head部分にjqueryとjquery.bxslider.minを読み込ませ、class名を指定します。
次にbody内の記述ですが、スライドさせたい要素を ul タグで囲み、囲んだ要素にheadで指定したclass名を付けます。以下はheadで「slider」とclass名を指定した場合の記述例です。
<ul class=”slider”>
<li><img src=”画像1のURL” /></li>
<li><img src=”画像2のURL” /></li>
<li><img src=”画像3のURL” /></li>
</ul>

リストを増やすことで、スライドする枚数を増やすことが出来ます。これだけで、画像がスライドするようになりました。
あとは見た目を整えるため、CSSでの調整が必要となります。CSSファイルも同封されていますが、CSSの知識があれば必要ないでしょう。