複数個のスライドを同時に動かす

Question

一個では動かせるのですが、複数個スライドを作ってeachをつけても同時に動きません。
どうしたらいいのでしょうか。

▼jQuery

$(function(){
    var slideImg = $(".sliderBox .item");
    var num = slideImg.length;
    var current = 0;
   $(".sliderBox").each(function(){
        slideImg.eq(0).addClass("show");
        setTimeout(slide,2000);

        function slide() {
            slideImg.eq(current).removeClass("show");
            current++;
             if(current >= num) {
                 current = 0;
             }
            slideImg.eq(current).addClass("show");
	    setTimeout(slide,2000);
        }
    });

});

▼HTML


		<div class="sliderBox">
			<ul class="slide left">
				<li class="item">
					<img src="">
				</li>
				<li class="item">
					<img src="">
				</li>
				<li class="item">
					<img src="">
				</li>
			</ul>
			<ul class="slide center">
				<li class="item">
					<img src="">
				</li>
				<li class="item">
					<img src="">
				</li>
				<li class="item">
					<img src="">
				</li>
			</ul>
			<ul class="slide right">
				<li class="item">
					<img src="">
				</li>
				<li class="item">
					<img src="">
				</li>
				<li class="item">
					<img src="">
				</li>
			</ul>
		</div>

Answer 1

変数slideImg （及び他の変数も）が each と関係なく固定だから。

$( function() {
	$( ".slideCommon" ).each( function() {
		var slideImg = $( this ).find( ".item" );
		var num = slideImg.length;
		var current = 0;
		slideImg.eq( current ).addClass( "show" );
		setInterval( function() {
			slideImg.eq( current ).removeClass( "show" );
			current++;
			if ( current >= num ) {
				current = 0;
			}
			slideImg.eq( current ).addClass( "show" );
		}, 2000 );
	} );
} ); // 未テスト

Comments

[a1291]

ありがとうございます！解決しました！！
ずっと悩んでいました。。