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

関連記事

  1. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  2. TyperText

    JavaScript

    テキストタイピングエフェクトを実装できる「TyperText」

    TyperTextはテキストタイピングエフェクトを実装できるjQuer…

  3. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

  4. shCircleLoader
  5. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  6. Tiny slider

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP