Web初心者がjQuery 自動で画像のスライドショーを実装する方法(サンプル付き)

今回は、web初心者向けにwebサイト上で配布しているスクリプトを使って自動で画像のスライドショーのjQueryを実装します。

このサイトで配布されているスクリプトを使ってみます。

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

ファイルをダウンロード STEP2

bxslider
サイトから、データを「ダウンロード」してください。

データを解凍します STEP3

「jquery.bxslider.zip」をサイトからダウンロードして、zipファイルを解凍します。

解凍すると
bxslider
データが入っています。

実際に動く記述を書きます STEP4

http://bxslider.com/
あとは、このサイトに書かれている手順で導入していきます。

このサンプルのままだと、自動でスライドしないので
こちらのページ http://bxslider.com/examples  「Auto show with start / stop controls」を使って作ってみます。

「auto: true」 これが自動でスライドさせる記述です。
「autoControls: true」これは、再生、ストップを表示させる記述です。もし必要なければ、この箇所を削除してください。

HTMLを設置します STEP5

画像は何枚でも大丈夫です。サンプルで使った画像の横幅の関係で
今回<div id=”container”>をつけました。

containerのCSSを記述します STEP6

画像のサイズが横幅が680pxでなので width:680pxとして、表示をみやすく中央あわせにしました。 
※ご自身の環境に合わせてください

jsとcssを付けます STEP7

bxslider
赤枠で囲った
「jquery.bxslider.css」
「jquery.bxslider.min.js」
をSTEP1でjQueryのコードの下に追加します。

※cssとjsファイルはご自身の環境に合わせてください

まとめ

[サンプル] jQuery 自動で画像のスライドショーを実装する

よくわからなかった人もいるかもしれませんが、画像が自動で変わるjQueryは、サイトのメイン画像などでよく使われますのでぜひ試してみてください。

※firefox、クローム、IEで動いていることを確認しております。

Web初心者がjQuery 自動で画像のスライドショーを実装する方法(サンプル付き)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*