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

サイトで使いどころが多いのが要素を次々に切り替えるエフェクトです。
これを世間ではカルーセルと呼んでいて、よく使われています。
jQueryプラグインのBilly the Carouselもそんなカルーセルの一つで、シンプルに使用できます。
jQueryプラグインでお手軽スライダーを作る!「Billy 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>

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

sponsors

「jQueryプラグインでお手軽スライダーを作る!「Billy Carousel」」をシェアする

記事作成:
記事URL:

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