jQuery carouFredSelプラグインを使う (2)

carouFredSelを操作する方法。
基本的には、triger() メソッドを使う。(引数に動作を表わす文字列を指定する。)

• 要素を追加する： insertItem(items)

静的なHTMLではなく、要素を動的に追加したい場合に使う。HTML文字列やjQueryオブジェクトを指定する。ループを回して画像を追加する場合のイメージは以下。

for(var i=0; i < imgFilenames.length;i++){
  var imgItem = '<img src="' + imgLocation + 't_' + imgFilenames[i].name + '">';
  $('#foo1').trigger('insertItem',imgItem);
}

ファイル名に”t_”をつけているのは、サムネイル画像を使っているため。
この単純な例では最後尾に追加されるが、これ以外に、場所を指定して挿入することもできる。

• 要素を削除する：removeItem(items)

// 3番目の要素を削除
$("#foo1").trigger("removeItem", 2);

• カルーセルを回転(移動)する：slideTo(destination)

指定した要素までカルーセルを回転する。

// 先頭に移動
$("#foo1").trigger('slideTo', 0 );
// 先頭に移動(easeInOutQuart効果を適用しつつ2秒かけて移動)
$("#foo1").trigger('slideTo', [0,{'duration':2000, 'easing': 'easeInOutQuart'}]);
// 3番目の要素に(逆)回転移動(順方向は"next")
$("#foo1").trigger("slideTo", [2, "prev"]);

最後の例の[prev]は次で詳細を設定することもできる。

• カルーセルを回転(移動)する：prev/next

初期化したときに、順(逆)回転の動きを設定することができる。その際、ボタンと紐付けることもできる。以下の例は逆回転の動作を「左方向に10要素、easeInOutQuart効果を適用して2秒で移動する」よう設定している。また、タグ名#btnConsoleFRのボタンをクリックするとこの動作が実行される。

$("#foo1").carouFredSel({
  direction: 'left',
  items: 10
  prev: {
    button: '#btnConsoleFR',
    key: 'left',
    items: 10,
    easing: 'easeInOutQuart',
    duration: 2000
  }
});