JavaScriptで複数のループスライダーのサイズに合わせてwidthを設定したい

Question

##【実装したいこと】
画像の幅がバラバラでも、それぞれの幅に合わせたwidthで各ループスライダーを動かしたいです。

JavaScriptで複数画像のループスライダーを実装したく、こちらのサイト[http://black-flag.net/jquery/20110707-3305.html]を参考に作りました。

しかし、実装したいループスライダーが１つではなく、１つのページに複数実装したいのですが、それぞれの画像のサイズが違うにも関わらず、一番下にあるループスライダーの幅で統一されてしまいます。

一番下のループスライダー以外は最後の画像が表示されなかったり、最後の画像から最初の画像に戻る時、間が空いてしまったりしてしまいます。

該当のソースコード

データベースに入っている4枚の画像を条件によって呼び出します。条件によってループスライダーを実装する数も変わります。

<div class="loopslider">
  <ul>
    <li><%= image_tag submit.image1.to_s, :height => 130 %></li>
    <li><%= image_tag submit.image2.to_s, :height => 130 %></li>
    <li><%= image_tag submit.image3.to_s, :height => 130 %></li>
    <li><%= image_tag submit.image4.to_s, :height => 130 %></li>
  </ul>
</div>

なので、全てに適応できるようにeachやthisなどを使ったのですが、一番下のループスライダーのwidthが全てに適応されてしまいました。

<script language="javascript" type="text/javascript">
  $(function(){
    $('.loopslider').each(function(){
        var loopsliderWidth = $(this).width();
        var loopsliderHeight = $(this).height();
        $(this).children('ul').wrapAll('<div class="loopslider_wrap"></div>');

        var loopWidth = 0;
        $(this).find('ul li').each(function(){
          loopWidth += $(this).width() + 2;
        })
        loopWidth += 1;

        $('.loopslider_wrap').css({
            top: '0',
            left: '0',
            width: ((loopWidth) * 2),
            height: (loopsliderHeight),
            overflow: 'hidden',
            position: 'absolute'
        });

        $('.loopslider_wrap ul').css({
            width: (loopWidth)
        });
        loopsliderPosition();

        function loopsliderPosition(){
            $('.loopslider_wrap').css({left:'0'});
            $('.loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},25000,'linear');
            setTimeout(function(){
                loopsliderPosition();
            },25000);
        };

        $(this).find('ul').clone().appendTo($(this).find('.loopslider_wrap'));

    });
});
</script>

試したこと

参考にしたサイトを元に(this)に変えたり、それぞれに幅を適応させるため、idではなく、classにした。

補足情報（FW/ツールのバージョンなど）

プログラミングを始めて数ヶ月で、説明も下手な部分が多いかもしれませんが、何卒教えていただけると幸いです。

Answer 1

$('.loopslider_wrap') 以降の$('セレクタ')を
$('セレクタ',this) か$(this).find('セレクタ') に置き換えてまわれば多分出来ます。

Comments

[m.shinji]

ご回答いただきありがとうございます！
$('.loopslider_wrap') 以降の合計４つの$('セレクタ')がある内、全てを$(this).find('セレクタ')とすると動きませんでしたが、上２つを$(this).find('セレクタ')にしたところ、全てのループスライダーが動き、全部画像を出すことができました！
ですが、二周目以降、それぞれのwidthが違うのに速さが同じせいか、一番下のループスライダーを基準に、二周目になった時、上に先に進んでいるループスライダーがあったとしてもまた戻って最初の位置からになってしまいます。全てのループスライダーをスムーズにさせたいのですが、他に何か方法はございますでしょうか？
よろしくお願いいたします。

[kei344]

関数 function loopsliderPosition(){} の前の行に
var $_ = $(this).find('.loopslider_wrap');
を挿入して、関数内の $('.loopslider_wrap') を $_ に置き換えてください。

[m.shinji]

ご回答ありがとうございます！

全てのループスライダーが幅に合わせて速度が変わり、全ての画像を表示させることは出来ました。
何度もお伺いしてしまって申し訳ありませんが、一周終わって、二周目に入る時に、一周目の最後の画像と二周目の最初の画像が繋がっておらず、一周目が全部消えてから二周目がいきなり現れるようになってしまいました。

自分でも試行錯誤してみたのですが、解決出来ず、助言をいただけると助かります。
よろしくお願いいたします。

[kei344]

質問内容が変わっているので、別途 新規質問をされることをお勧めします。

> 一周目が全部消えてから二周目がいきなり現れるようになってしまいました。
1週目+1枚目を動かすようにして、2週目に差し掛かったあたりで別のスライダーを上に重ねてうまく引き継ぐようにするとか結構面倒な処理が必要になると思います。

[m.shinji]

ご丁寧にありがとうございます！！
教えていただきありがとうございました！