簡単に使えるスライドショーbx-sliderの備忘録。そして簡単なのに最近つまったので、未来の自分のためにメモを。。。
まずは使い方から。
1.ダウンロードします。
bxslider.comに行って右上のボタンからダウンロードします。
2.展開してサーバーにアップロードします。
この中から使うのは
- jquery.bxslider.min.js
- jquery.bxslider.css
- images（操作ボタンを入れる場合に必要）
jquery.bxslider.min.jsはjquery.bxslider.jsから改行など、「人にとって読みやすくするための書式を全部なくして行をつめたコンパクトバージョンです。」だから基本的にはminを使用します。cssはスライドショーのための装飾。imageの中身は操作ボタンのイメージが入ってます。
3.ヘッドタグにファイルの呼び出しを挿入。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="/jquery.bxslider.min.js"></script> <link href="/jquery.bxslider.css" rel="stylesheet" />
//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.jsはjqueryをgoogle先生の力を借りて呼び出してます。サーバー内にすでにjqueryが入っている場合は、入れる必要ありません。jquery.bxslider.min.jsとjquery.bxslider.cssがしっかり読み込まれてるか確認します。
4.htmlをマークアップします。
<ul id="slide01"> <li><img src="/images/test01.jpg" /></li> <li><img src="/images/test02.jpg" /></li> <li><img src="/images/test03.jpg" /></li> <li><img src="/images/test04.jpg" /></li> </ul>
今回はid要素を使って#slide01という名前でbxsliderを使います。class要素を使う場合は
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#slide01').bxSlider();
});
</head>
$(document).ready(function(){は必ず入れるようにしてください。htmlを全部読み込んでから動くよという意味です。
先に読み込むと動作しない可能性があります。$(‘#slide01′)htmlにマークアップした要素idと名前を入れてあげます。
これでスライドショーが動きます。
6.オプションとサイズ変えたい
$(document).ready(function(){
$('.bxslider').bxSlider({
auto:true, //自動で動くか否か
speed:1000, //スライド動作の速度。ミリ秒指定。デフォルトでは500です。
pause:5000, //スライド動作するまでの時間。あんまり短いとせわしないです。
mode: 'fade', //スライドするときのエフェクト、フェードイン、フェードアウトで切り替わります。''ではさむ
pager: false, //1枚目～4枚目みたいな表記。trueで表示。falseで非表示
controls: false //次へ＞前へ＜の表示、非表示。trueで表示。falseで非表示。
});
});
色々なオプションがあるのであくまで一例で。注意点は最後のオプションの後に,はいりません。
意外とこれが入ってて動いてないってケースを見かけたので念のため。
サイズを調整したい場合は
<div class="saizucyouseisuruyo"> <ul id="slide01"> <li><img src="/images/test01.jpg" /></li> <li><img src="/images/test02.jpg" /></li> <li><img src="/images/test03.jpg" /></li> <li><img src="/images/test04.jpg" /></li> </ul> </div>
こんな感じでスライダーをdiv要素で囲ってあげて、cssで大きさを指定してあげればそのサイズに合わせて拡大縮小してくれます。スライド周りの装飾やレイアウトを変えたい場合は、jquery.bxslider.cssを修正する必要があります。
.saizucyouseisuruyo{
height: 300px;
width: 980px;
overflow: hidden; /*overflow: hidden;で読み込み時にグチャっと画像が並ぶのが見えないようできます。 */
}
7.動かないとき
bxsliderが動かない。画像が一瞬表示されるがふっとぶなどのときのチェックリスト。未来の自分のために
- 1.ヘッドタグでjquery.bxslider.min.js、jquery.bxslider.cssは読み込んでる？ソースでクリックすればわかりやすいです。読み込んでないときはnotfoundになってます。
- 2.$(document).ready(function()を記述してる？オプションの最後に,や’false’みたいなことしてない？
- 3.htmlの要素名とヘッドタグ内の要素名はしっかり揃ってる？（さすがにこれはあんまりないか。。。）
- 4.ヘッドタグの呼び出しの順番はjqueryの呼び出しがbxsliderの呼び出しの上にある？
- 5.ここまでやって動かないなら、jqueryのバージョンによって動かない現象があるので別のバージョンに変えてください。
ちょっと適当ですが5が曲者。bxsliderは便利で簡単に導入できますが、jqueryのバージョンによって動作しないことがあるようです。ちなみに私はその現象にぶちあたって、かなり困りました。画像が一瞬表示されたと思ったらふっとんでしまうという現象でした。読み込むjqueryをサイトのものではなく、//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.jsにしたところ問題なく動作しました。
