[JS]Responsive Web Designに対応したカルーセルタイプのスライダー -Elastislide

表示サイズに合わせて、最適なサイズに変更して表示されるカルーセルタイプのスライダーを紹介します。

Elastislide – A Responsive jQuery Carousel Plugin

上記デモ（1200px）を幅800pxに変更すると、それに合わせてスライダーのサイズも変更されます。

幅800pxで表示したデモ

[ad#ad-2]

Elastislideのデモ

デモではさまざまなタイプのスライダーがあります。

デモページ：1

最もベーシックなタイプ

デモページ：2

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

デモページ：3

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

デモページ：4

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

デモページ：5

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