JavaScript

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

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

[ads_center]

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

CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方前のページ

Google +1(プラスワン)ボタンを今更ながら設置してみた次のページ

関連記事

  1. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  2. elmenu

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  3. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  4. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  5. flipLightBox
  6. jQuery ui material design datepicker

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP