jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

jQueryプラグインで画面のサイズによってレイアウトを合わせてくれるレスポンシブなスライダー「Elastislide」を使ってみました。カルーセルタイプのスライダーなので結構使う機会がありそうな感じです。アイディア次第で色んな用途に応用が効きそうですね。iPhoneでも確認してみたところ、ちゃんとレイアウトも調整されてスライダーも動作しました。ということで以下、使い方です。

Elastislideの使い方

以下のサイトからダウンロードできます。

デモもあります。

使い方はとても簡単です。まずはダウンロードしたファイルを読み込みます。最初にhead内にCSSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="css/elastislide.css" />

あとは</body>の直前にJSを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">
    $('#carousel').elastislide({
        imageW: 180,
        minItems: 5
    });
</script>

head内に読み込みたい場合は$で括ればいいかと思います。

<script type="text/javascript">
$(function(){
    $('#carousel').elastislide({
        imageW: 180,
        minItems: 5
    });
});
</script>

次にHTMLです。

<div id="carousel" class="es-carousel-wrapper">
    <div class="es-carousel">
        <ul>
            <li><a href="#"><img src="images/sample01.jpg" alt="sample01" /></a></li>
            <li>...</li>
               …
        </ul>
    </div>
</div>

これだけで簡単に実装できます。わかりやすくていいですね。オプションも色々あるので変えてみるとおもしろいです。実際のブラウザではこんな感じに表示されます。

Elastislide ブラウザ確認

画面サイズを縮小してみると。

Elastislide ブラウザ確認 縮小

ちゃんと画面に合わせて調整されますね。ちなみにiPhoneでも見てみるとこのようになります。

Elastislide ブラウザ確認 iPhone

ちゃんと最適化されて表示されますね。

オプション

オプションではスライドするスピードや画像の横幅なんかを指定できます。

$('#carousel').elastislide({
    speed: 200,
    easing: 'easeInBack',
    imageW: 180,
    margin: 3,
    border: 2,
    minItems: 1,
    current: 0,
    onClick: function() { return false; }
});
speed
スライドする時のスピードです。値を高くすると遅くなり、低くすると速くなります。
easing
デフォルトでは特に指定されてないんですが、ここをeaseInBackと指定すると一瞬バックしてからスライドするようになります。
imageW
画像を表示する時の横幅を指定できます。
margin
画像の右側のマージンを指定でき、間隔を調整することができます。
border
画像まわりのボーダーの太さを変更できます。
minItems
画面のサイズを小さくした時に最小限表示させる画像の数を決めることができます。
current
ページを読み込んだ時に何番目の画像から表示させるかを指定できます。0から開始されます。
onClick
要素をクリックした時のコールバックを指定することができます。

ということで、なかなかいい感じのスライダーかと思います。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives