下記のような画像スライダーがあるのですが、ご覧のように、スライダーABが勝手に連動してしまいます。 ■実際の動作 [https://jsfiddle.net/0q0wy0zk/](https://jsfiddle.net/0q0wy0zk/) ■そのコード ```html スライダーA

画像a1

画像a2

スライダーB

画像b1

画像b2

画像b3

``` ```javascript (function(){ var slideWidth = $('.slide').outerWidth(); // .slideの幅を取得して代入 var slideNum = $('.slide').length; // .slideの数を取得して代入 var slideSetWidth = slideWidth * slideNum; // .slideの幅×数で求めた値を代入 $('.slideSet').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 var slideCurrent = 0; // 現在地を示す変数 // アニメーションを実行する独自関数 var sliding = function(){ // slideCurrentが0以下だったら if( slideCurrent < 0 ){ slideCurrent = slideNum - 1; // slideCurrentがslideNumを超えたら }else if( slideCurrent > slideNum - 1 ){ // slideCUrrent >= slideNumでも可 slideCurrent = 0; } $('.slideSet').stop().animate({ left: slideCurrent * -slideWidth }); } // 画像が押されたとき $('.slideSet').click(function(){ slideCurrent++; sliding(); }); }()); ``` ```css .slideSet > div { width: 100px; height: 50px; border: 1px solid #f00; box-sizing: border-box; } .slide { float: left; } .slideSet { position: absolute; } .slider { width: 100px; height: 50px; overflow: hidden; position: relative; } .slide1 { background: red; } .slide2 { background: yellow; } .slide3 { background: aqua; } .slide4 { background: purple; } .slide5 { background: green; } ``` どなたか、それぞれのスライダーを独立させるような方法をご教示いただけませんでしょうか？尚、スライダーの数はABCだったりABCDEFだったりと変化するので、AにはAのjavascriptを書いて、BにはBのjavascriptを書いて、、というのは避けたいです。よろしくお願いいたします。

	@@ -1 +1 @@
1	- ~~javascriptで作った~~スライダーが~~、複数ある時に~~勝手に連動~~してしまいます。~~
1	+ スライダーが勝手に連動？

質問編集履歴