簡単にスライダーを作成できるJavaScript「jFlow」

スライダーがあると非常に便利ですが、結構利用するのは難しかったりします。
jQueryプラグインの「jFlow」を利用すると簡単にスライダーが作成できます。

使用方法

jFlowからjquery.flow.1.2.jsをjQueryからjquery.jsをダウロードします。


<script type="text/javascript" src="/test/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/test/js/jquery.flow.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#id名").jFlow({
		slides: "#mySlides", //スライド部分のid
		controller: ".jFlowControl", //コントローラーのクラス
		slideWrapper : "#jFlowSlide", //各スライドID
		selectedWrapper: "jFlowSelected",  //選択中のスライド
		width: "50%", //幅
		height: "200px",//高さ
		prev: ".jFlowPrev", //前へのクラス
		next: ".jFlowNext"  //次へのクラス
	});
});
</script>

あとはスライドコンテンツなどを以下のように記述します。


<div id="id名">
	<span class="jFlowControl">No 1</span>
	<span class="jFlowControl">No 2</span>
	<span class="jFlowPrev"><<Prev</span> <span class="jFlowNext">Next>></span>
</div>
<div id="mySlides">
	<div>スライドコンテンツ1</div>
	<div>スライドコンテンツ2</div>
</div>

簡単にスライダーを作成できるJavaScript「jFlow」

使用方法

サンプル