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

とてもシンプルで素敵な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を指定してあげるとその値が最大値の幅になり、そこから画面サイズが変わるごとに調整されていきます。