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. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  2. Effect Ideas for Card Stacks
  3. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  4. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  5. jquery-base-slider
  6. Woco Accordion jQuery plugin

コメント

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

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

最近の記事

  1. ペーストしてスタイルを合わせる
  2. Hermèsオレンジスポーツバンド
  3. GoPro HERO8 Black

アーカイブ

PAGE TOP