2012.2

jQueryを使ったシンプルなイメージスライダー。

2012.02.11 / Labs

jQueryを使ったシンプルなイメージスライダーのサンプルです。
ボックス内に複数の画像を横に並べて、左右にスライド表示をする仕組みです。
サンプルはこちら

HTML内では#galleryボックス内に画像を並べているだけです。画像の枚数には指定はありませんので、何枚でもOKです。

CSSでは基本的にボックスのサイズ指定と、オーバーフロー時に隠す設定のみです。

画像のスライドは「prev」「next」のリンクをクリックした際に、左右にスライドします。スライドする位置は、あらかじめ各画像サイズをもとに座標位置を配列に格納しておきます。