JavaScript、カルーセルスライダーのブレイクポイント移動時の不具合を修正したい。

jQueryのslickを使わず、JavaScriptだけで、自作でカルーセルスライダーを作り、意図した通りに動いています。

しかし、検証を進める中で、ブラウザのウィンドウを、PCサイズ ⇔ スマホサイズに広げたり狭めたりする時（ブレイクポイント（768px）移動時）に、画像の動きが乱れるという不具合が発生しています。

（ブレイクポイントの切り替えがない、768px以上時でのウィンドウサイズの変更、768px以下内でのウィンドウサイズの変更時には、画像の動きの乱れはなく、意図した通りのスライドが行われております。）

実現したいこと

ブラウザのウィンドウを、PCサイズからスマホサイズに狭めた時、スマホサイズからPCサイズに広げた時に発生する、画像の動きの乱れをなくしたいです。

該当のソースコード

html
1<section>
2	<ul>
3		<li class="pic0"><img src="test1.jpg"></li>
4		<li class="pic1"><img src="test2.jpg"></li>
5		<li class="pic2"><img src="test3.jpg"></li>
6		<li class="pic3"><img src="test4.jpg"></li>
7		<li class="pic4"><img src="test5.jpg"></li>
8		<li class="pic5"><img src="test6.jpg"></li>
9		<li class="pic6"><img src="test7.jpg"></li>
10	</ul>
11</section>

css
1section {
2	margin-top: 100px;
3}
4
5ul {
6	width: 100%;
7	position: relative;
8	overflow: hidden;
9}
10ul li {
11	list-style: none;
12	width: 100%;
13	position: absolute;
14	top: 0;
15	transform: translateX(calc(-22% / 2));
16	transition: all .5s;
17}
18ul li img {
19	width: 22%;
20	height: auto;
21}
22ul .pic0 {
23	left: -28%;
24	opacity: 0;
25}
26ul .pic1 {
27	left: -2%;
28}
29ul .pic2 {
30	left: 24%;
31}
32ul .pic3 {
33	left: 50%;
34}
35ul .pic4 {
36	left: 76%;
37}
38ul .pic5 {
39	left: 102%;
40}
41ul .pic6 {
42	left: 128%;
43	opacity: 0;
44}
45
46@media screen and (max-width: 767px) {
47
48ul li {
49	transform: translateX(calc(-75% / 2));
50}
51ul li img {
52	width: 75%;
53}
54ul .pic0 {
55	left: -116%;
56	opacity: 0;
57}
58ul .pic1 {
59	left: -116%;
60}
61ul .pic2 {
62	left: -33%;
63}
64ul .pic3 {
65	left: 50%;
66}
67ul .pic4 {
68	left: 133%;
69}
70ul .pic5 {
71	left: 216%;
72	opacity: 0;
73}
74ul .pic6 {
75	left: 216%;
76}
77
78}

javascript
1// カルーセルスライダー
2
3const lis = document.querySelectorAll('li');
4
5function find_pic0_num() {
6	const find_pic0_box = [];
7	lis.forEach(li => {
8		find_pic0_box.push(li.classList.contains('pic0'));
9	})
10	const pic0_num = find_pic0_box.indexOf(true);
11	return pic0_num;
12}
13
14let origin_pic0_num = find_pic0_num();
15let move_pic0_num = find_pic0_num();
16
17function remove_all_class() {
18	for (let i = 0; i < lis.length; i++) {
19		if (move_pic0_num > lis.length - 1) {
20			move_pic0_num = 0;
21		}
22		lis[move_pic0_num].classList.remove(`pic${i}`);
23		move_pic0_num++;
24	}
25}
26
27function add_all_class() {
28	for (let i = 0; i < lis.length; i++) {
29		if (move_pic0_num > lis.length - 1) {
30			move_pic0_num = 0;
31		}
32		lis[move_pic0_num].classList.add(`pic${i}`);
33		move_pic0_num++;
34	}
35}
36
37function carousel_slider() {
38	remove_all_class();
39	origin_pic0_num++;
40	if (origin_pic0_num > lis.length - 1) {
41		origin_pic0_num = 0;
42	}
43	move_pic0_num = origin_pic0_num;
44	add_all_class();
45	move_pic0_num = origin_pic0_num;
46
47	setTimeout(carousel_slider, 2000);
48}
49
50carousel_slider();
51
52// カルーセルスライダーの .slider の高さを設定
53
54const ul = document.querySelector('ul');
55let ul_img_height;
56
57function set_ul_height() {
58	lis.forEach(li => {
59		ul_img_height = li.children[0].getBoundingClientRect().height;
60		ul.style.height = `${ul_img_height}px`;
61	})
62	console.log(ul_img_height)
63}
64
65window.addEventListener('load', () => {
66	set_ul_height();
67})
68window.addEventListener('resize', () => {
69	set_ul_height();
70})

コードについては、JavaScript勉強中の私が自作で考えた為、不適切、冗長な箇所もあると思いますが、どうぞ、ご指導を頂ければと思います。

よろしくお願い致します。

回答1件

ベストアンサー

こんな感じでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <style>
9    section {
10    margin-top: 100px;
11    }
12
13    ul {
14    width: 100%;
15    position: relative;
16    overflow: hidden;
17    }
18    ul li {
19    list-style: none;
20    width: 100%;
21    position: absolute;
22    top: 0;
23    transform: translateX(calc(-22% / 2));
24    }
25
26    ul li img {
27    width: 22%;
28    height: auto;
29    }
30    ul .pic0 {
31    left: -28%;
32    opacity: 0;
33    }
34    ul .pic1 {
35    left: -2%;
36    }
37    ul .pic2 {
38    left: 24%;
39    }
40    ul .pic3 {
41    left: 50%;
42    }
43    ul .pic4 {
44    left: 76%;
45    }
46    ul .pic5 {
47    left: 102%;
48    }
49    ul .pic6 {
50    left: 128%;
51    opacity: 0;
52    }
53
54    .transition li {
55      transition: all .5s;
56    }
57
58    @media screen and (max-width: 767px) {
59
60    ul li {
61    transform: translateX(calc(-75% / 2));
62    }
63    ul li img {
64    width: 75%;
65    }
66    ul .pic0 {
67    left: -116%;
68    opacity: 0;
69    }
70    ul .pic1 {
71    left: -116%;
72    }
73    ul .pic2 {
74    left: -33%;
75    }
76    ul .pic3 {
77    left: 50%;
78    }
79    ul .pic4 {
80    left: 133%;
81    }
82    ul .pic5 {
83    left: 216%;
84    opacity: 0;
85    }
86    ul .pic6 {
87    left: 216%;
88    }
89
90    }
91  </style>
92</head>
93
94<body>
95<section>
96  <ul id="ul" class="transition">
97    <li class="pic0"><img src="https://placehold.jp/2d1050/ffffff/800x600.png"></li>
98    <li class="pic1"><img src="https://placehold.jp/ff00ff/ffffff/800x600.png"></li>
99    <li class="pic2"><img src="https://placehold.jp/00ff70/ffffff/800x600.png"></li>
100    <li class="pic3"><img src="https://placehold.jp/113370/ffffff/800x600.png"></li>
101    <li class="pic4"><img src="https://placehold.jp/1d1270/ffffff/800x600.png"></li>
102    <li class="pic5"><img src="https://placehold.jp/3d4050/ffffff/800x600.png"></li>
103    <li class="pic6"><img src="https://placehold.jp/000000/ffffff/800x600.png"></li>
104  </ul>
105</section>
106<script>
107  // カルーセルスライダー
108
109  const lis = document.querySelectorAll('li');
110
111  function find_pic0_num() {
112  const find_pic0_box = [];
113  lis.forEach(li => {
114  find_pic0_box.push(li.classList.contains('pic0'));
115  })
116  const pic0_num = find_pic0_box.indexOf(true);
117  return pic0_num;
118  }
119
120  let origin_pic0_num = find_pic0_num();
121  let move_pic0_num = find_pic0_num();
122
123  function remove_all_class() {
124  for (let i = 0; i < lis.length; i++) { if (move_pic0_num> lis.length - 1) {
125    move_pic0_num = 0;
126    }
127    lis[move_pic0_num].classList.remove(`pic${i}`);
128    move_pic0_num++;
129    }
130    }
131
132    function add_all_class() {
133    for (let i = 0; i < lis.length; i++) { if (move_pic0_num> lis.length - 1) {
134      move_pic0_num = 0;
135      }
136      lis[move_pic0_num].classList.add(`pic${i}`);
137      move_pic0_num++;
138      }
139      }
140
141      function carousel_slider() {
142      remove_all_class();
143      origin_pic0_num++;
144      if (origin_pic0_num > lis.length - 1) {
145      origin_pic0_num = 0;
146      }
147      move_pic0_num = origin_pic0_num;
148      add_all_class();
149      move_pic0_num = origin_pic0_num;
150
151      setTimeout(carousel_slider, 2000);
152      }
153
154      carousel_slider();
155
156      // カルーセルスライダーの .slider の高さを設定
157
158      const ul = document.querySelector('ul');
159      let ul_img_height;
160
161      function set_ul_height() {
162      lis.forEach(li => {
163      ul_img_height = li.children[0].getBoundingClientRect().height;
164      ul.style.height = `${ul_img_height}px`;
165      })
166      }
167
168      window.addEventListener('load', () => {
169      set_ul_height();
170      })
171
172      const mediaQuery = window.matchMedia('(max-width: 767px)')
173      let timeoutId;
174
175      window.addEventListener('resize', () => {
176        set_ul_height();
177        let elm = document.getElementById("ul");
178
179        if(mediaQuery.matches) {
180          elm.classList.remove("transition");
181        }
182
183        if ( timeoutId ) return;
184        timeoutId = setTimeout( function () {
185          timeoutId = 0 ;
186          if(!elm.classList.contains("transition")) {
187            elm.classList.add("transition");
188          }
189        }, 500 );
190        
191      })
192
193</script>
194</body>
195
196</html>
197

投稿2023/01/20 17:47

Jon_do

総合スコア1373

回答へのコメント

gousuke

2023/01/21 05:05

Jon_do様、この度は、ご回答を下さいまして、有難うございます。意図通りに動く事を、確認させて頂きました。修正頂きました箇所を、しっかりと勉強、理解し、力を付けて行こうと思います。この度は、本当に有難うございました。深く、お礼を申し上げます。

gousuke

2023/01/21 09:41

Jon_do様、重ねまして、この度は、有難うございました。実は、しっかりと検証させて頂きました所、一点、意図した通りに動いていない箇所がありました。そこで、また、別で質問を投稿をさせて頂きますので、もし、回答を頂けるようでしたら、よろしくお願い致します。また、同じカルーセルスライダーの件で、別の質問も出てきましたので、それも、また別で、質問投稿を致しますので、こちらも、ご存知でしたら、回答を頂けましたら幸いです。どうぞ、よろしくお願い致します。