jCarousel Lite スタート位置

質問

jCarousel Liteをつかってスライドショーを作ってます。
http://www.gmarwaha.com/jquery/jcarousellite/?#install

イメージが15枚あるとして、見えてるイメージは5枚。
スタート位置を、1、５、１０、1、５、１０（ループ）とページをリロードする毎に
変更したいと思っています。

単純に、

start: 0,
の数値を
start: 10,

変えると、スタートの位置は変わりますが、スライドが一周せず途中で
くるくる回ってしまいます。。

なにか良い方法あれば、教えて下さい。

回答No.3

yyr446 · ベストアンサー

回答したとおりの方法でサンプル書いて見ました。
※jquery.cookie.js使って、Cookieに次の開始位置を保存してます。
(行頭の全角スペースは取り去ってね！)

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript" src="/jslib/jquery.cookie.js"></script>
<script type="text/javascript" src="/jslib/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
$(function(){
　var start;
　if($.cookie("start_no") === null){
　 $.cookie("start_no","0");
　 start = 0;
　}else start = $.cookie("start_no") * 1;

　var list = $(".anyClass li").clone(true);
　$(".anyClass ul").empty();

　if(start < 10){
　 if(start < 5){
　　 for(var i=0;i<15;i++) $(".anyClass ul").append(list[i]);
　　 $.cookie("start_no","5");
　 }else{
　　 for(var i=5;i<15;i++) $(".anyClass ul").append(list[i]);
　　 for(var i=0;i<5;i++) $(".anyClass ul").append(list[i]);
　　 $.cookie("start_no","10");
　 }
　}else{
　　 for(var i=10;i<15;i++) $(".anyClass ul").append(list[i]);
　　 for(var i=0;i<5;i++) $(".anyClass ul").append(list[i]);
　　 $.cookie("start_no","0");
　}

　$(".anyClass").jCarouselLite({
　 auto:true,
　 visible:1,
　 start:0,
　 circular:true
　});

});
</script>

HTMLマークアップ部は
<div class="anyClass">
<ul>
<li><img src="1.png" alt="1枚目"></li>
<li><img src="2.png" alt="2枚目"></li>
<li><img src="3.png" alt="3枚目"></li>
<li><img src="4.png" alt="4枚目"></li>
...省略　15個ある前提
</ul>
</div>

お礼

お返事大変おそくなり失礼致しました。

こちら理想とおりの動きが出来ました。

ご回答有り難う御座いました！！

回答No.4

yyr446

おっと、見えてるイメージは5枚だから、5枚ずつめくるんでしたね！
visible:1をvisible:5
にして下さい。

お礼

お返事大変おそくなり失礼致しました。

こちら理想とおりの動きが出来ました。

ご回答有り難う御座いました！！

回答No.2

yyr446

javascriptで順番を入れ替えるって方法もありだと思います。
jCarouselLiteをセットした<ul>内の<li>の並び順を、リロードするたびに
入れ替えればよいかと、javascriptのDOM関数で出来ますよね。
$(function() {
で
$(".anyClass").jCarouselLite({option});
より前に、<li>を並べ替える処理を入れる。jQueryベースなんだから
簡単に書けそうな気がします。

$(".anyClass > li")でごそっと取れるけど、1、５、１０、1、５、１０
と並べ替えるの面倒そう、最初から配列に入れといて、任意の順に
からっぽの$(".anyClass")にappendする方が楽だ。

お礼

ご回答有り難う御座います。

javascriptで<li>を入れ替え出来るんですね。。

すみません、私が基本的な事が分かってない様です。

なにかサンプルを書いて頂けると非常に有り難いです。

どうかよろしくお願いします。

回答No.1

reggaepunc

画像の順番をPHPなどのサーバーサイドで順番を入れ替えるのが簡単かもですね。
（ハック的な回答ですみません。）
（pluginを解析するのは骨が折れますから。）

お礼

回答有り難うございます。

出来れば、javascriptでどうにか出来ないかと思いましたが、
難しいですかねー。

クッキーを使ってページにアクセスするごとに数値を変えてあげると出来るかも！？

うーん、もう少し勉強してみます。。

有り難うございました。