サイト上での新着情報や関連情報などのギャラリー的要素となるものを
左右に設置した矢印ボタンなどを使って、表示要素をスライド操作させるカルーセルと呼ばれるUI。
jQueryプラグインでもカルーセルパネルを実装するものは数多く有りますが
必要最低限の動作でスクリプトもシンプルな形でのカルーセルパネルを作ってみたので紹介してみます。

まずは動作のサンプルから。
左右に現れる矢印をクリックしてください。

jQuery SIMPLE CAROUSEL【SAMPLE】

左右に現れる矢印をクリックすることで
並べられたコンテンツ要素（画像）が一つずつスライドします。

コンテンツ要素が左右の一番端に位置している時は
片方の矢印は非表示となります。

このカルーセルパネルUIの全体構成について、
まずはHTMLから。

◆HTML
<div id="carousel">
<ul>
<li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo02.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo03.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo04.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo05.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo06.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo07.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo08.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo09.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="#"><img src="img/photo10.jpg" width="100" height="100" alt="" /></a></li>
</ul>
</div><!--/#carousel-->

大枠を任意のIDで覆い（サンプルでは「#carousel」とします）、
その中に＜ul＞のリストを入れ込みます。
このリストの＜li＞が一つのコンテンツ要素となります。

コンテンツ要素を増やしたり減らしたりする際は、
HTML側で単純に＜li＞の数を変更すればいいだけになっています。

そしてこのHTMLソースに対してのCSSは以下の様に。

◆CSS
#carousel {
	margin: 0 auto;
	width: 500px;
	height: 100px;
	text-align: left;
	position: relative;
}

#carousel_prev,
#carousel_next {
	top: 0;
	width: 20px;
	height: 100px;
	background: #000;
	cursor: pointer;
	position: absolute;
}
#carousel_prev {
	left: -20px;
	background:transparent url(../img/prev.jpg) no-repeat top left;
}
#carousel_next {
	right: -20px;
	background:transparent url(../img/next.jpg) no-repeat top left;
}

#carousel ul li {
	width: 100px;
	float: left;
	display: inline;
}

/* =======================================
	ClearFixElements
======================================= */
#carousel ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#carousel ul {
	display: inline-block;
	overflow: hidden;
}

全体を囲んでいる「#carousel」の値がカルーセルパネルの表示領域となり
それぞれの値は変更が可能になっています。

一点注意点は、今回のサンプルの構成では
大枠ID、「#carousel」の幅（width）に対して、
その中に入る＜li＞「#carousel ul li」の幅（width）は
割り切れる値でないと正常に動作しません。。。

そして実際に動作を実行させるスクリプトは以下の様になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#carousel').each(function(){
		var carouselWidth = $(this).width();
		var carouselHeight = $(this).height();
		$(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>');
		$(this).children('ul').wrapAll('<div id="carousel_wrap"></div>');

		var prevSize = $('#carousel_prev').width();
		var nextSize = $('#carousel_next').width();

		$('#carousel_wrap').css({
			width: (carouselWidth),
			height: (carouselHeight),
			position: 'relative',
			overflow: 'hidden'
		});

		var listWidth= $('#carousel_wrap').children('ul').children('li').width();
		var listCount= $('#carousel_wrap').children('ul').children('li').length;
		$('#carousel_wrap ul').css({
			top: '0',
			left: '0',
			width: (listWidth)*(listCount),
			position: 'absolute'
		});
		carouselPosition();

		$('#carousel_prev').click(function(){
			$('#carousel_wrap ul:not(:animated)').animate({left: '+=' + (listWidth)},500,function(){
				carouselPosition();
			});
		});

		$('#carousel_next').click(function(){
			$('#carousel_wrap ul:not(:animated)').animate({left: '-=' + (listWidth)},500,function(){
				carouselPosition();
			});
		});

		function carouselPosition(){
			var ulLeft = $('#carousel_wrap ul').css('left');
			var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
			if(carouselWidth >= ((listWidth)*(listCount))) {
				$('#carousel_prev').css({display:'none'});
				$('#carousel_next').css({display:'none'});
			} else if(ulLeft == 0+'px') {
				$('#carousel_prev').css({display:'none'});
				$('#carousel_next').css({display:'block'});
			} else if(ulLeft == (maskWidth)+'px') {
				$('#carousel_prev').css({display:'block'});
				$('#carousel_next').css({display:'none'});
			} else {
				$('#carousel_prev').css({display:'block'});
				$('#carousel_next').css({display:'block'});
			};
		};
	});
});
</script>

4行目の「#carousel」が実行させるID名になるので
全体を別のID名で構成した場合には、ここの名前も変更する必要があります。

＜ul＞と＜li＞の長さを判断して左右の矢印の表示／非表示を判断したり
クリックした際の移動距離や位置を制御しています。

今回は必要最低限のシンプルなカルーセルパネルとなっているので
自動で再生される機能や、凝った演出も組み込んでいません。

サイト上にさりげなく載せる新着情報の様な、
派手な動きは求めないカルーセルパネルUIが必要な際などに使えるかなと思っています。

シンプルなカルーセルパネルUIが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから