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要素を追加した際の諸問題