質問編集履歴

1 タイトル変更

退会済みユーザー

退会済みユーザー

2018/02/28 16:55  投稿

javascriptで作ったスライダーが、複数ある時に勝手に連動してしまいます。
スライダーが勝手に連動?
下記のような画像スライダーがあるのですが、ご覧のように、スライダーABが勝手に連動してしまいます。
■実際の動作
[https://jsfiddle.net/0q0wy0zk/](https://jsfiddle.net/0q0wy0zk/)
■そのコード
```html
スライダーA
<section class="a">
<div class="slider">
<div class="slideSet">
<div class="slide1 slide-a1 slide">画像a1</div>
<div class="slide2 slide-a2 slide">画像a2</div>
</div>
</div>
</section>
スライダーB
<section class="b">
<div class="slider">
<div class="slideSet">
<div class="slide1 slide-b1 slide">画像b1</div>
<div class="slide2 slide-b2 slide">画像b2</div>
<div class="slide3 slide-b3 slide">画像b3</div>
</div>
</div>
</section>
```
```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を書いて、、というのは避けたいです。
よろしくお願いいたします。
  • JavaScript

    38075 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る