jCarousel Liteでカルーセル(縦横スライド)してるとき、スライドする要素を入れ替えたいなと。
 

<div class="carousel">
  <div class="jCarouselLite">
    <ul>
    <li><img class="c1" src="images/thumb-01" /></li>
    <li><img class="c2" src="images/thumb-02" /></li>
    <li><img class="c3" src="images/thumb-03" /></li>
    </ul>
  </div>
</div>

 
普通、こんな風に書きます。(idとclassは普通付けませんが説明のため便宜的に付けました)
この<li>要素をこういう風に書かないで、投稿のカテゴリ一覧から取ってきて、動的に突っ込むのはどうだろうということです。(最初の<ul>は空っぽということですね)
 


jQuery("#xxx").append("<li><img src='images/thumb-04' /></li>");

 
こうして appendすると確かに要素としてはアペンドされてるっぽいんですけど、アペンドされた内容がカルーセルしません。
じゃあ、最初に必要な分だけ並べておいて、srcを書きかえればいいじゃん、ということで、
 


jQuery("#i1").attr("src", "images/thumb-04");

 
こうやってみましたが、うまくいきません。正解はコレ!
 


jQuery("#c1").attr("src", "images/thumb-04");

 
jCarousel Liteのコードを読んでみるとわかるんですが、サーキュラー(くるくる回る)のときは、<li>要素をクローンしているんですね。
 

if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}

 
だから、idでソースを指定してもクローンされる前のソースが書き変わるわけではないのでダメ、なのかな?
クラス指定だったら、元のもクローンのも全部書き変えちゃうからOKね。
appendがダメなのは、クローンされる前に appendできないからだろうか。jCarousel Liteより先に appendしてるつもりなんだけど、難しいね。
 
参考:jQuery でoption要素を追加した際の諸問題