htmlとjQueryで画像のスライダーを作る方法

※2012/04/17 リンク先のサイトが関係ないサイトになっていましたので、リンクを外しています。

CSSとｊQueryで画像のスライダーを作れる「Automatic Image Slider」のご紹介です。

以下のようなスクリプトを設置する事で動作するようです。

//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

iPadなどのFlashをサポートしないデバイスが登場してくると、HTMLのみのギャラリーが増えそうですよね。
サイトにはチュートリアルが紹介されているので、興味のある方はご覧になってみてください。