jQueryのプラグイン「bxSlider」を使用してスライドショーを設置した時の方法をメモします。
色々なサイトでメインの画像などをスライドさせて出力しているのをよく目にします。
「bxSlider」を使用すれば、画像やコンテンツ等のスライドショーを簡単に実現することが可能です。
また、オプションも色々あるのでスライド、フェード、ページャーなど自由に設定することができます。
下記サイトのDownloadボタンからダウンロードします。
下記にjQueryの「bxSlider」プラグインを使用して、画像やコンテンツをスライドショーした時の使用方法を記述します。
■ bxSliderの使用方法
【読み込むファイル】
jQueryとダウンロードしたbxSliderを読み込みます。
1 2 3 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="jquery.bxslider.min.js"></script><link href="jquery.bxslider.css" rel="stylesheet" /> |
【js】
1 2 3 4 5 6 7 8 9 | <script type="text/javascript">$(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, speed: 1000, pause: 2000 });});</script> |
自動でスライドするように「auto: true」を指定しています。
指定がない場合はスライドしないです。
「speed」や「pause」でスライドのスピードを調整することができます。
※オプションを設定する時にオプションの末尾に「,」を記述しているとIEで動かない可能性があるので注意が必要です。
【html】
1 2 3 4 5 6 | <ul> <li><img src="img/sample1.jpg" /></li> <li><img src="img/sample2.jpg" /></li> <li><img src="img/sample3.jpg" /></li> <li><img src="img/sample4.jpg" /></li></ul> |
また、divタグで設定することも可能です。
画像ではなくても設置することができます。
1 2 3 4 5 6 | <div> <div>あいうえお</div> <div>かきくけこ</div> <div>さしすせそ</div> <div>たちつてと</div></div> |
上記の設定をすれば、簡単に画像やコンテンツのスライドショーをすることができます。
他にも色々なオプションがあるので、すごく使いやすいです。
また、jQueryのバージョンが古くてIEだけ動かないことがあったので、
IEで動かない場合にjQueryのバージョンを確認すると解決するかもしれないです。