jQueryでループするスライダーを作る「loopedSlider」

画像や要素をスライドさせて見せるサイトが多くなっています。
JavaScriptライブラリのjQueryプラグイン「loopedSlider」を使用し、ループするスライダーを作ってみましょう。

使用方法

loopedSliderからloopedslider.jsをjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="loopedslider.js"></script> 
<script>
$(document).ready(function() {
	$('#id名').loopedSlider();
});
</script>
上記を記述後、画像やテキストなどの要素を入れ込みます。

<div id="id名">	
	<div class="container">
		<div class="slides">
			<div><img src="画像パス" /><br />テキスト</div>
			<!-- 以下画像分 -->
		</div>
	</div>
	<a href="#" class="previous">前へ</a>
	<a href="#" class="next">次へ</a>
	<!-- ここからページネーション -->
	<ul class="pagination">
		<li><a href="#">1</a></li> //1つ目に要素へ
		<li><a href="#">2</a></li> //2つ目に要素へ
		<!-- 以下要素分 -->
	</ul>	
</div>
CSSで以下を指定する必要があります。

<style type="text/css">
.container { width:要素の幅; height:要素の高さ; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:要素の幅; display:none; }
</style>
自動でページネーションなどが出ないのは不便ですが、それぞれオリジナル画像を柔軟に使用できる点はプラスです。
また、オプションとして自動ループがあります。

$(document).ready(function() {
	$('#id名').loopedSlider({
		autoStart: 2500, //ループが始まる時間
		restart: 7000 //要素の表示時間
	});
});

サンプル

First Image
Second Image
Third Image
Fourth Image

Javascriptサンプルページ一覧
skuare.net