質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

Q&A

解決済

1回答

536閲覧

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

gousuke

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

0グッド

1クリップ

投稿2023/01/14 08:48

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勉強中の私が自作で考えた為、不適切、冗長な箇所もあると思いますが、どうぞ、ご指導を頂ければと思います。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんな感じでしょうか?

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問