とてもシンプルで素敵なjQueryスライダー「Blueberry」を使ってみました。レスポンシブ対応なので、スマートフォンで閲覧した時にもサイズが調整されます。マークアップもとてもシンプルに記述できるのでいい感じです。オプションもスピードやインターバル、自動スライダーなど基本的な機能は一通り揃っています。
[ads_center]
Blueberryの使い方
以下のサイトからプラグインファイルをダウンロードできます。
Blueberry – A simple, fluid, responsive jQuery image slider.
いつも通りhead内にjQuery本体とプラグインを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="jquery.blueberry.js"></script>
スライダー画像リストを内包している要素を指定します。
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
HTMLも以下のようにシンプルに記述できます。
<div class="blueberry">
<ul class="slides">
<li><img src="images/img01.jpg" /></li>
<li><img src="images/img02.jpg" /></li>
<li><img src="images/img03.jpg" /></li>
<li><img src="images/img04.jpg" /></li>
</ul>
</div>
CSSでクラス名blueberryの要素にmax-widthを指定してあげるとその値が最大値の幅になり、そこから画面サイズが変わるごとに調整されていきます。
.blueberry {
max-width: 960px;
}
オプション
以下いくつかオプションの解説です。
interval
画像が切り替わる時の間隔です。デフォルトは5000に設定されています。
duration
フェードでアニメーションするスピードを設定できます。デフォルトは500です。
hoverpause
マウスホバーで停止します。trueかfalseを指定できます。デフォルトはfalseです。
pager
ページャーを表示できます。デフォルトはtrue、非表示にしたい場合はfalseです。
keynav
デフォルトはtrueです。キーボードの戻る(←)、進む(→)で画像をスライドさせることができます。
まとめ
ということで、とても簡単にレスポンシブのスライダーを実装できるので便利ですね。スマホでもイメージスライダーを表示させたいっていう場合には1つの手段として覚えておいてもいいかもしれません。個人的にはデザイン、機能なんかもシンプルだしとても使いやすいといった印象でした。
