carouFredSel の表示方法を詳細に設定したい

JavaScript jQuery

どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。

・prev/nextボタンを付ける
・画像と画像の間に12pxのpaddingを挿入する
・画像の幅、高さを設定する
・画像が切り替わる間隔(ミリ秒)
・1画面に表示させる画像の数や画像の総枚数を設定する

などの細かいオプション設定は下記のように引数に記述します。

$(function() {
	$('ul#user_interaction').carouFredSel({
	prev: '#prev', //id="prev"をもつDOM要素にprevを設定
	next: '#next',//id="next"をもつDOM要素にprevを設定
	padding: [0 12px 0 0],//画像と画像の間に12pxのpaddingを挿入
	items: {
	visible: 1,//1画面に表示させる画像の数(1枚)
	minimum: 2,//最小限入れる画像の総枚数(3枚)
	start: "random",//画像の切り替え方法(ランダムに表示される)
	width: 480, //一枚の画像の幅
	height: 240 //一枚の画像の高さ
	},
	auto: 4000, //画像が切り替わる間隔(ミリ秒)

});

<ul id="user_interaction">
	<li><a href="#"><img src="thumb01.jpg" width="480" height="240" /></a></li>
	<li><a href="#"><img src="thumb02.jpg" width="480" height="240" /></a></li>
	<li><a href="#"><img src="thumb03.jpg" width="480" height="240" /></a></li>
	<li><a href="#"><img src="thumb04.jpg" width="480" height="240" /></a></li>
</ul>
<a id="next1" href="#">&gt;</a>
<a id="prev1" href="#">&lt;</a>

上記以外にもたくさん、細かい設定が可能です。詳しくは下記リンクをご覧ください

Caroufredselのオプション一覧 - http://caroufredsel.frebsite.nl