[JS]実装は簡単、機能は最小限、Responsiveデザイン対応の超シンプルなスライダーのスクリプト -Blueberry

表示サイズに合わせて最適なサイズで表示する、幅が固定ではないレイアウト用の超シンプルなスライダーを実装するjQueryのプラグインを紹介します。

「Blueberry」という名前は、開発時に使った画像がブルーベリーだったからだそうです。

Blueberry - A simple, fluid, responsive jQuery image slider.

[ad#ad-2]

• Blueberryのデモ
• Blueberryの使い方

Blueberryのデモ

スライダーのサイズは、親エレメントに対して最適なサイズに自動変更されます。
まずは、幅1200pxで表示。

デモページ：幅1200pxで表示

表示サイズを小さくすると、スライダーもそれに伴い変更されます。

デモページ：幅480pxで表示

[ad#ad-2]

Blueberryの使い方

実装はいたってシンプルです。

外部ファイル

「jquery.js」と当スクリプト、あと当スタイルシートを外部ファイルとして記述します。
※スタイルシートはスライダーのベースとなるスタイルが記述されています。

<link rel="stylesheet" href="css/blueberry.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/jquery.blueberry.js"></script>

HTML

スライド表示する画像をリスト要素で実装し、div要素で内包します。

<div class="blueberry">
  <ul class="slides">
    <li><img src="img/slide1.jpg" /></li>
    <li><img src="img/slide2.jpg" /></li>
    <li><img src="img/slide3.jpg" /></li>
    <li><img src="img/slide4.jpg" /></li>
  </ul>
</div>

ナビゲーションはオプションで自動生成され、下記のようなコードになります。

<div class="blueberry">
  <ul class="slides">
    <li><img src="img/slide1.jpg" /></li>
    <li><img src="img/slide2.jpg" /></li>
    <li><img src="img/slide3.jpg" /></li>
    <li><img src="img/slide4.jpg" /></li>
  </ul>
<!-- Optional, see options below -->
  <ul class="pager">
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
  </ul>
<!-- Optional, see options below -->
</div>

JavaScript

ラッパーのdiv要素をjQueryのセレクタで指定し、スクリプトを実行します。

$(window).load(function() {
	$('.blueberry').blueberry();
});

CSS

スライダーのサイズは親エレメント（ラッパー）に依存するので、max-widthやmin-widthで最大・最小幅を設定できます。
下記は、最大幅の設定の例です。

.blueberry { max-width: 960px; }

スクリプトのオプション

オプションではアニメーションのスピードやナビゲーションを設定できます。

interval

スライダーの切り替えの時間

duration

フェードの時間

lineheight

「.slide」エレメントの高さ

hoverpause

ホバー時の中断の有無

pager

ナビゲーションの有無

keynav

キーボード操作の有無