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

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="#">&#62;</a>

<a id="prev1" href="#">&#60;</a>

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

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