bxSliderは、レスポンシブにも対応した高性能なjQueryスライダーです。デモはコチラから確認できます。
bxSliderを使ってスライダーを設置する方法を紹介したいと思います。
ステップ1. bxSliderのダウンロードと設置
まずは、公式ページからbxSliderをダウンロードします。右上の[Download]ボタンからダウンロードできます。
ファイルをダウンロードしたら、解凍して以下のファイルをサーバーに設置します。
- imagesフォルダ
- jquery.bxslider.css
- jquery.bxslider.min.js
とりあえず必要なのはこれらのファイルだけです。
サーバーにファイルを設置したら、HTMLファイルに以下を追加します。<head>内に記述すればOKです。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> <link href="css/jquery.bxslider.css" rel="stylesheet" />
1行目でjQueryをロードし、2行目以降でbxSliderに必要なファイルをロードします。
ステップ2. HTMLにスライドを追加
続いて、HTML内にスライドする画像を追加します。
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul>
このようにbxsliderというクラスを付けて、リスト形式で記述します。
ステップ3. bxSliderの呼び出し
最後にbxSliderを呼び出すためのコードを追加します。これは</body>の直前に追加しましょう。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
これで、スライド用に追加した画像がスライダーとして動くようになります。
あとがき
FlexSliderと同様に、スライダーを簡単に設置することができますね。
また、bxSliderはキャプション付きにしたり手動スライダーにしたりと、様々なオプションが用意されています。オプションについては、Optionsページやデモページから詳細を確認することができます。