デザインもシンプルで素敵なレスポンシブのjQueryスライダー「Blueberry」を使ってみた

とてもシンプルで素敵なjQueryスライダー「Blueberry」を使ってみました。レスポンシブ対応なので、スマートフォンで閲覧した時にもサイズが調整されます。マークアップもとてもシンプルに記述できるのでいい感じです。オプションもスピードやインターバル、自動スライダーなど基本的な機能は一通り揃っています。

Blueberryの使い方

以下のサイトからプラグインファイルをダウンロードできます。

いつも通り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つの手段として覚えておいてもいいかもしれません。個人的にはデザイン、機能なんかもシンプルだしとても使いやすいといった印象でした。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives