logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
03-6432-0915

MENU

スタッフブログ

お見積り依頼

初心者でも簡単にスライドが生成出来る。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の知識があれば必要ないでしょう。