固定数の要素をjCarouselで使用し、開始点と終了点を動的に追加および削除します。

Question

現在、WebアプリケーションでjCarouselを使用しようとしています。ここでは、垂直のカルーセル。私は、表示されるデータ用に作成された不明なペインの数を持つことができる問題に取り掛かりました。

DOMのオーバーロードにlisと関連するコンテンツがたくさんありますが、3つのli要素を作成してjCarouselを使用する方法を探しています（3つ指定します。現在の要素がスクロールの目的で表示されています）、ユーザが2番目に「次へ」をクリックすると同時に新しいliを動的に作成し、同時に最初のliを削除します。明らかに、これはすべてのカルーセル項目を通って前進することを支持する必要があり、また、最初のすべてのカルーセル項目に戻る。

うまくいけば、この説明は十分に明確です - 私は画像を描くことができたらいいですね！

アイデアをいただければ幸いです！

Answer 1

jCarouselには、既にコンテンツを動的に読み込むための多くのオプションがあります。たとえば、あなたはjavascript array of your slidesを定義することができます。

var mycarousel_itemList = [ 
    {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"}, 
    {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"}, 
    {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"}, 
    {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"}, 
    {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"}, 
    {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"}, 
    {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"}, 
    {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"}, 
    {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"}, 
    {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"} 
]; 

function mycarousel_itemLoadCallback(carousel, state) 
{ 
    for (var i = carousel.first; i <= carousel.last; i++) { 
     if (carousel.has(i)) { 
      continue; 
     } 

     if (i > mycarousel_itemList.length) { 
      break; 
     } 

     carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1])); 
    } 
}; 
/** 
* Item html creation helper. 
*/ 
function mycarousel_getItemHTML(item) 
{ 
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />'; 
}; 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
     size: mycarousel_itemList.length, 
     itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback} 
    }); 
}); 

これが必要とHTMLだけである：

<ul id="mycarousel" class="jcarousel-skin-ie7"> 
    <!-- The content will be dynamically loaded in here --> 
    </ul>