Javascript – bxSliderでスライドショーを簡単実現！
知恵袋に登場してたので、ちょっとだけ更新・・・・。
動かないんだけど！というようなことがありましたら、コメント欄に書いていただけるとお返事できます。
目次
bxSliderって何？
Javascriptを使ってスライドショーができるのです！
スライドショーって・・・何って？スライドショーとは画像が自動で切り替わったり、【<】こんなボタンを押すと画像がきりかわったりするアレですｗ
百聞は一見にしかず
サンプルをご用意しました。こんな感じで動作します。
下記リンクに行くとサンプルを見ることができます。
bxSliderの特徴
- 導入が簡単である。
- カスタマイズが簡単である。
- オプションが豊富である。
- IE対応
といったところです。
だからこそオススメなんです！
bxSliderを使う準備をしよう。
手順
- フォルダを作成
- ファイルを入れるフォルダを作成してください
- jQueryをダウンロード
- jQuery公式サイト右側にある「Download(jQuery);」をクリック
- 作成したフォルダの中に保存してください
jQueryはバージョンがあるので要注意！
- bxSliderをダウンロード
- bxSlider公式サイト右側にある赤いボタンの「DOWNLOAD」をクリック
- Zip形式で圧縮されていますので解凍してください。
- Source（フォルダ）
- jquery.bxSlider.min.js（Javascriptファイル）
- jquery.easing.1.3.js（Javascriptファイル）
- README（ファイル）
とありますが、今回使用するのは
jquery.bxSlider.min.js（Javascriptファイル）
だけです。
これを作成したフォルダに移動またはコピーしてください。
- HTMLファイルの作成
- 下記のソースを記述し、ファイル名をindex.htmlでフォルダに保存してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript" src="jquery-1.6.4.min.js"></script><script type="text/javascript" src="jquery.bxSlider.min.js"></script><title>bxSliderを動かそう</title></head><body></body></html> |
以上で準備完了です。
jQueryはバージョンがあるので要注意！
上記ソースの5行目をバージョンに合わせて変更してください。
使ってみよう
実際にスライドショーを作っていきます。
まず始めにHTMLファイルのhead内に下記のソースを記述してください。
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function(){ $('#goto').bxSlider(); });</script> |
次に実際に動く部分を作ります。
1 2 3 4 5 | <ul id=”goto”> <li>１つ目表示中</li> <li>２つ目表示中</li> <li>３つ目表示中</li></ul> |
１行目のid=”goto”は好きなように変えてください。
Ex) id=”hoge”
変えた場合はhead内に入れたソースの３行目
1 | $('#goto').bxSlider(); |
の#gotoの部分を変えてください
Ex) $(‘#hoge’).bxSlider();
これでノーマルなスライドショーは出来上がり。
簡単でしょ～！
あとはCSSで文字に色をつけたり背景の色を変えたりしてください！
オプション
オプションはこんな感じで使ってください。
Head内に記述したソースに・・・
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> $(document).ready(function(){ $('#goto').bxSlider({ nextText: '次へ' , prevText: '前へ', displaySlideQty: 2, moveSlideQty: 1 }); });</script> |
なんて具合です。
オプションでよく使いそうなモノ簡単に説明します。
- mode
- 縦にスライドなどを設定できます。
- Ex) mode: vertical
- speed
- 動く速さを設定できます。数字を大きくすれば遅くなります。
- Ex) speed: 1000
- prevText & nextText
- 「前へ」や「次へ」の文字を変えることができます。
- Ex) prevText : ‘前へ’
- auto
- 自動でスライドさせるか変えることができます。
- Ex） auto: true
- pause
- スライドの速さでを変えることができます。
- Ex） pause:5000
- displaySlideQty
- 表示させるスライドの個数を変えることができます。
- Ex) displaySlideQty: 3
- moveSlideQty
- 一度にスライドさせる個数を変えることができます。
- Ex) moveSlideQty: 3
この他にもオプションはたくさんあります。
気になる方はbxSlider公式サイトを御覧ください。
ポイント
オプションを指定する際はカンマで区切りますが、指定した最後のオプションの後にはカンマを付けないようにしてください。
そうしなければIE6,7では動きません。
まとめ
スライドショーを使う機会があり、どれにしようか迷っていたらbxSliderを発見。IEでも動作するし、オプションも豊富でカスタマイズが簡単。これほど使いやすいものはなかなかないかなぁと思い使用しました。
ぜひみなさんも機会があれば使ってみてください。
コメントフォーム