jQueryプラグインでお手軽スライダーを作る！「Billy Carousel」

サイトで使いどころが多いのが要素を次々に切り替えるエフェクトです。
これを世間ではカルーセルと呼んでいて、よく使われています。
jQueryプラグインのBilly the Carouselもそんなカルーセルの一つで、シンプルに使用できます。

使用方法

Billy the Carouselからファイルをダウンロードします。
なんだかjquery.comがおかしいので、こちらからダウンロードしてください。
billy.carousel.jquery.min.js


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="billy.carousel.jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#billy_scroller').billy();
});
</script>

上記を記述したらhtml部分を書きます。


<div id="billy_clip">
	<ul id="billy_scroller">
		<li></li> //切り替えたい分の要素を書きます
		<li></li>
		<li></li>
	</ul>	
</div>
<ul id="billy_indicators"></ul> //インジケーターを付けられます（なくても問題ないです）
<a href="#" id="billy_prev">Prev</a> //前へ
<a href="#" id="billy_next">Next</a> //次へ

最後にCSSを追加すれば完成です。


<style>
ul#billy_indicators li {
	display: block;
	border: 1px solid black;
	width: 10px;
	height: 10px;
	float: left;
	margin: 0 10px 0 0;
}
ul#billy_indicators li a {
	display: block;
	width: 10px;
	height: 10px;
}	

#billy_indicators li.active { background: black; }

#billy_clip { 
	width: 500px; 
	position: relative; /* For IE */
	overflow: hidden;
	height: 200px;
}

#billy_scroller {
	width: 5000px;
	height: 200px;
}
	
#billy_scroller li {
	width: 500px;
	height: 200px;
	float: left;
}		
</style>

サンプル

Prev Next

Javascriptサンプルページ一覧

skuare.net