[JS]Responsive Web Designに対応したカルーセルタイプのスライダー -Elastislide
Post on:2011年9月14日
表示サイズに合わせて、最適なサイズに変更して表示されるカルーセルタイプのスライダーを紹介します。

Elastislide – A Responsive jQuery Carousel Plugin
上記デモ(1200px)を幅800pxに変更すると、それに合わせてスライダーのサイズも変更されます。

幅800pxで表示したデモ
[ad#ad-2]
Elastislideのデモ
デモではさまざまなタイプのスライダーがあります。

最もベーシックなタイプ

ボーダー無しで、より小さく画像を配置したタイプ

より大きいマージンとボーダー、スライダーのエフェクトをイージングにしたタイプ

スタートのポジションを定義したタイプ

2つのカルーセルをフロートで配置したタイプ
[ad#ad-2]
Elastislideの実装
HTML
各画像はリスト要素で配置し、スライダーを可変にするためにdiv要素で内包します。
<div id="carousel" class="es-carousel-wrapper"> <div class="es-carousel"> <ul> <li> <a href="#"> <img src="images/medium/1.jpg" alt="image01" /> </a> </li> <li>...</li> ... </ul> </div> </div>
画像の幅
サムネイル画像の幅はスクリプトで指定します。
$('#carousel').elastislide({ imageW : 180 });
スクリプトのオプション
スクリプトのオプションでは、アニメーションのスピード、エフェクトの種類、画像のサイズ、マージン・ボーダーのサイズ、スタートのポジションなどを設定できます。
speed : 450, // animation speed easing : '', // animation easing effect imageW : 190, // the images width margin : 3, // image margin right border : 2, // image border minItems : 1, // the minimum number of items to show. // when we resize the window, this will // make sure minItems are always shown // (unless of course minItems is higher // than the total number of elements) current : 0, // index of the current item // when we resize the window, // the plugin will make sure that // this item is visible
sponsors