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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/01/21 05:05
2023/01/21 09:41