レスポンシブにも対応した高性能なjQueryスライダー「bxSlider」

レスポンシブにも対応した高性能なjQueryスライダー「bxSlider」

レスポンシブにも対応した高性能なjQueryスライダー「bxSlider」

bxSliderは、レスポンシブにも対応した高性能なjQueryスライダーです。デモはコチラから確認できます。

bxSliderを使ってスライダーを設置する方法を紹介したいと思います。

スポンサードリンク

ステップ1. bxSliderのダウンロードと設置

まずは、公式ページからbxSliderをダウンロードします。右上の[Download]ボタンからダウンロードできます。

bxSliderのダウンロード

ファイルをダウンロードしたら、解凍して以下のファイルをサーバーに設置します。

  • 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ページデモページから詳細を確認することができます。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

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