下記のような画像スライダーがあるのですが、ご覧のように、スライダーABが勝手に連動してしまいます。
■実際の動作
https://jsfiddle.net/0q0wy0zk/
■そのコード
html
1スライダーA 2<section class="a"> 3 <div class="slider"> 4 <div class="slideSet"> 5 <div class="slide1 slide-a1 slide">画像a1</div> 6 <div class="slide2 slide-a2 slide">画像a2</div> 7 </div> 8 </div> 9</section> 10 11スライダーB 12<section class="b"> 13 <div class="slider"> 14 <div class="slideSet"> 15 <div class="slide1 slide-b1 slide">画像b1</div> 16 <div class="slide2 slide-b2 slide">画像b2</div> 17 <div class="slide3 slide-b3 slide">画像b3</div> 18 </div> 19 </div> 20</section>
javascript
1(function(){ 2 var slideWidth = $('.slide').outerWidth(); // .slideの幅を取得して代入 3 var slideNum = $('.slide').length; // .slideの数を取得して代入 4 var slideSetWidth = slideWidth * slideNum; // .slideの幅×数で求めた値を代入 5 $('.slideSet').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 6 7 var slideCurrent = 0; // 現在地を示す変数 8 9 // アニメーションを実行する独自関数 10 var sliding = function(){ 11 // slideCurrentが0以下だったら 12 if( slideCurrent < 0 ){ 13 slideCurrent = slideNum - 1; 14 15 // slideCurrentがslideNumを超えたら 16 }else if( slideCurrent > slideNum - 1 ){ // slideCUrrent >= slideNumでも可 17 slideCurrent = 0; 18 19 } 20 21 $('.slideSet').stop().animate({ 22 left: slideCurrent * -slideWidth 23 }); 24 } 25 26 27 // 画像が押されたとき 28 $('.slideSet').click(function(){ 29 slideCurrent++; 30 sliding(); 31 }); 32}());
css
1 .slideSet > div { 2 width: 100px; 3 height: 50px; 4 border: 1px solid #f00; 5 box-sizing: border-box; 6 } 7 8 .slide { 9 float: left; 10 } 11 12 .slideSet { 13 position: absolute; 14 } 15 16 .slider { 17 width: 100px; 18 height: 50px; 19 overflow: hidden; 20 position: relative; 21 } 22 23 .slide1 { 24 background: red; 25 } 26 27 .slide2 { 28 background: yellow; 29 } 30 31 .slide3 { 32 background: aqua; 33 } 34 35 .slide4 { 36 background: purple; 37 } 38 39 .slide5 { 40 background: green; 41 }
どなたか、それぞれのスライダーを独立させるような方法をご教示いただけませんでしょうか?
尚、スライダーの数はABCだったりABCDEFだったりと変化するので、AにはAのjavascriptを書いて、BにはBのjavascriptを書いて、、というのは避けたいです。
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/28 01:10