画像切り替えスライダーを実装 (JSのeach、lengthに関して)

JSとcssを使って画像が切り替わるスライダーを実装しています。
現在の書き方だと、スライダーのdiv.wrapを複製した場合、.imgの数を数えてしまうことにより
スライダーそれぞれが同時にスライドせず、順番にスライドしてしまいます。
これを、div.wrapが何個あっても同時にスライドさせるように書き換えたいのですが、、
分かる方いらっしゃいましたらご教示お願いいたします。
※現在は画像ではなく仮でbackground-colorにしています。

HTML
1<div id="container">
2  <div class="wrap">
3      <div class="img"></div>
4      <div class="img"></div>
5      <div class="img"></div>
6      <div class="img"></div>
7    <div class="img"></div>
8  </div>
9
10  <div class="wrap">
11      <div class="img"></div>
12      <div class="img"></div>
13      <div class="img"></div>
14      <div class="img"></div>
15      <div class="img"></div>
16  </div>
17</div>

CSS
1#container {
2  display: flex;
3}
4
5.wrap {
6 width: 50%;
7  position: relative;
8}
9
10.img {
11  width: 200px;
12  height: 200px;
13  background-color: #000;
14  position: absolute;
15  top: 0;
16  left: 0;
17  z-index: 1;
18  overflow: hidden;
19}
20
21.img.active {
22          z-index: 3 !important;
23          animation: slideNext 1s linear 0s forwards;
24        }
25
26.img.out {
27  z-index: 2;
28}
29
30@keyframes slideNext {
31  0% {
32    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
33    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
34  }
35  100% {
36      -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
37      clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
38  }
39}
40
41.img:nth-of-type(1) {
42  background-color: #333;
43}
44
45.img:nth-of-type(2) {
46  background-color: #444;
47}
48
49.img:nth-of-type(3) {
50  background-color: #555;
51}
52
53.img:nth-of-type(4) {
54  background-color: #666;
55}
56
57.img:nth-of-type(5) {
58  background-color: #777;
59}

javascript
1$(window).on('load', function() {
2            
3            $('.wrap > .img:first').addClass('active out');
4
5            var fade_image01 = $('.wrap > .img');
6            var fade_time = 4000;
7            
8            if (fade_image01.length) {
9
10                var current = 0;
11                var old = 0;
12                var next = 1;
13
14                setInterval(function() {
15					
16                    old = current;
17                    current = current === fade_image01.length - 1 ? 0 : current + 1;
18					//console.log(current);
19                    next = next === fade_image01.length - 1 ? 0 : next + 1;
20
21                    
22                    fade_image01.eq(current).addClass('active out');
23                    fade_image01.eq(old).removeClass('active');
24                    
25                    setTimeout(function() {
26                        fade_image01.eq(old).removeClass('out');
27                    }, 2000);
28
29                }, fade_time);
30            }
31          });

kei344

2020/12/02 06:59

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

.each()とコンテクストを使ってはいかがでしょうか。

サンプル

js
1$(window).on('load', function () {
2  $('.wrap').each(function(i,e){ // 追加
3    
4    $('.img:first', e).addClass('active out'); // 変更
5  
6    var fade_image01 = $('.img', e); // 変更
7//...
8  }); // 追加
9
10});