前提・実現したいこと
画像を5枚使用して作成しています。
5枚目まで行くと、1枚目に戻る時、不自然に戻ります。
(1回画像が見えてもう一度フェードがかかるような感じ)
不自然なく無限に自動スライドショーをするにはどうしたらよいでしょうか。
よろしければ、ご教示ください。
発生している問題・エラーメッセージ
おそらく無限ループ設定がされていないため、 5枚目から1枚目に戻る時、不自然に始まる。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<body> 4<section id="auto-slide02"> 5 <div id="auto-slider-fade02"> 6 <input type="radio" id="auto-slider-fade02-1" name="gal"> 7 <input type="radio" id="auto-slider-fade02-2" name="gal"> 8 <input type="radio" id="auto-slider-fade02-3" name="gal"> 9 <input type="radio" id="auto-slider-fade02-4" name="gal"> 10 <input type="radio" id="auto-slider-fade02-5" name="gal"> 11 <label for="auto-slider-fade02-1" id="navi1" class="btn1"></label> 12 <label for="auto-slider-fade02-2" id="navi2" class="btn1"></label> 13 <label for="auto-slider-fade02-3" id="navi3" class="btn1"></label> 14 <label for="auto-slider-fade02-4" id="navi4" class="btn1"></label> 15 <label for="auto-slider-fade02-5" id="navi5" class="btn1"></label> 16 <div id="slide"> 17 <div id="slide1" class="slide-img"> 18 <img src="assets/auto-slider-fade02-img01.jpg" alt="img"> 19 <label id="navi1b" class="btn2"></label> 20 </div> 21 <div id="slide2" class="slide-img"> 22 <img src="assets/auto-slider-fade02-img02.jpg" alt="img"> 23 <label id="navi2b" class="btn2"></label> 24 </div> 25 <div id="slide3" class="slide-img"> 26 <img src="assets/auto-slider-fade02-img03.jpg" alt="img"> 27 <label id="navi3b" class="btn2"></label> 28 </div> 29 <div id="slide4" class="slide-img"> 30 <img src="assets/auto-slider-fade02-img04.jpg" alt="img"> 31 <label id="navi4b" class="btn2"></label> 32 </div> 33 <div id="slide5" class="slide-img"> 34 <img src="assets/auto-slider-fade02-img05.jpg" alt="img"> 35 <label id="navi5b" class="btn2"></label> 36 </div> 37 </div> 38 <div style="padding:30%;"></div> 39 </div> 40</section> 41<script> 42var mySwiper = new Swiper('.swiper-container', { 43 pagination: { 44 el: '.swiper-pagination', 45 type: 'bullets', 46 clickable: true, 47 dynamicBullets: true, 48 dynamicMainBullets: 1, 49 } 50}); 51</script> 52</body> 53</html> 54
css
1 2#auto-slider-fade02 { 3 position: relative; 4 width: 1000px; 5 height: 250px; 6 margin: 0 auto; 7 padding-bottom: 7.5%; 8 overflow: hidden; 9} 10 11@media screen and (min-width: 641px) { 12 #auto-slider-fade02 { 13 padding-bottom: 20px; 14 } 15} 16 17#auto-slider-fade02 input { 18 display: none; 19} 20 21.btn1 { 22 position: absolute; 23 bottom: 0; 24 width: 12px; 25 height: 12px; 26 border-radius: 7px; 27 background-color: #ccc; 28 cursor: pointer; 29} 30 31@media screen and (min-width: 641px) { 32 .btn1 { 33 width: 12px; 34 height: 12px; 35 border-radius: 17px; 36 } 37} 38 39#navi1, 40#navi1b { 41 left: 27%; 42} 43 44@media screen and (min-width: 641px) { 45 #navi1, 46 #navi1b { 47 left: 40%; 48 } 49} 50 51#navi2, 52#navi2b { 53 left: 37%; 54 bottom: 30px; 55} 56 57@media screen and (min-width: 641px) { 58 #navi2, 59 #navi2b { 60 left: 45%; 61 bottom: 30px; 62 } 63} 64 65#navi3, 66#navi3b { 67 left: 47%; 68 bottom: 30px; 69} 70 71@media screen and (min-width: 641px) { 72 #navi3, 73 #navi3b { 74 left: 50%; 75 bottom: 30px; 76 } 77} 78 79#navi4, 80#navi4b { 81 left: 57%; 82 bottom: 30px; 83} 84 85@media screen and (min-width: 641px) { 86 #navi4, 87 #navi4b { 88 left: 55%; 89 bottom: 30px; 90 } 91} 92 93#navi5, 94#navi5b { 95 left: 67%; 96 bottom: 30px; 97} 98 99@media screen and (min-width: 641px) { 100 #navi5, 101 #navi5b { 102 left: 60%; 103 bottom: 30px; 104 } 105} 106 107#slide { 108 position: absolute; 109 width: 100%; 110 height: 100%; 111 opacity: 0; 112 animation: auto-slider-fade02 30s infinite; 113 -moz-animation: auto-slider-fade02 30s infinite; 114 -webkit-animation: auto-slider-fade02 30s infinite; 115 pointer-events: none; 116} 117 118.slide-img { 119 position: absolute; 120 width: 100%; 121 height: 100%; 122} 123.slide-img img { 124 width: 100%; 125} 126 127#slide1 { left: 0; } 128#slide2 { left: 1000px; } 129#slide3 { left: 2000px; } 130#slide4 { left: 3000px; } 131#slide5 { left: 4000px; } 132 133.btn2 { 134 position: absolute; 135 bottom: 0; 136 width: 12px; 137 height: 12px; 138 border-radius: 15px; 139 /* background-color: #56b329; */ 140} 141 142@media screen and (min-width: 641px) { 143 .btn2 { 144 width: 20px; 145 height: 20px; 146 border-radius: 25px; 147 } 148} 149 150#auto-slider-fade02-1:checked ~ #slide { 151 animation: auto-slider-fade02-a 30s infinite; 152 animation-delay: 0s; 153 -moz-animation: auto-slider-fade02-a 30s infinite; 154 -moz-animation-delay: 0s; 155 -webkit-animation: auto-slider-fade02-a 30s infinite; 156 -webkit-animation-delay: 0s; 157} 158 159#auto-slider-fade02-2:checked ~ #slide { 160 animation: auto-slider-fade02-b 30s infinite; 161 animation-delay: -6s; 162 -moz-animation: auto-slider-fade02-b 30s infinite; 163 -moz-animation-delay: -6s; 164 -webkit-animation: auto-slider-fade02-b 30s infinite; 165 -webkit-animation-delay: -6s; 166} 167 168#auto-slider-fade02-3:checked ~ #slide { 169 animation: auto-slider-fade02-c 30s infinite; 170 animation-delay: -12s; 171 -moz-animation: auto-slider-fade02-c 30s infinite; 172 -moz-animation-delay: -12s; 173 -webkit-animation: auto-slider-fade02-c 30s infinite; 174 -webkit-animation-delay: -12s; 175} 176 177#auto-slider-fade02-4:checked ~ #slide { 178 animation: auto-slider-fade02-d 30s infinite; 179 animation-delay: -18s; 180 -moz-animation: auto-slider-fade02-d 30s infinite; 181 -moz-animation-delay: -18s; 182 -webkit-animation: auto-slider-fade02-d 30s infinite; 183 -webkit-animation-delay: -18s; 184} 185 186#auto-slider-fade02-5:checked ~ #slide { 187 animation: auto-slider-fade02-e 30s infinite; 188 animation-delay: -24s; 189 -moz-animation: auto-slider-fade02-e 30s infinite; 190 -moz-animation-delay: -24s; 191 -webkit-animation: auto-slider-fade02-e 30s infinite; 192 -webkit-animation-delay: -24s; 193} 194 195/* 各スライド向けスライドショー */ 196 197@keyframes auto-slider-fade02 { 198 0% { left:0px; opacity:0; } 199 2% { left:0px; opacity:1; } 200 18% { left:0px; opacity:1; } 201 20% { left:0px; opacity:0; } 202 20.005% { left:-1000px; opacity:0; } 203 25% { left:-1000px; opacity:1; } 204 38% { left:-1000px; opacity:1; } 205 40% { left:-1000px; opacity:0; } 206 40.005% { left:-2000px; opacity:0; } 207 45% { left:-2000px; opacity:1; } 208 58% { left:-2000px; opacity:1; } 209 60% { left:-2000px; opacity:0; } 210 60.005% { left:-3000px; opacity:0; } 211 65% { left:-3000px; opacity:1; } 212 78% { left:-3000px; opacity:1; } 213 80% { left:-3000px; opacity:0; } 214 80.005% { left:-4000px; opacity:0; } 215 85% { left:-4000px; opacity:1; } 216 98% { left:-4000px; opacity:1; } 217 1000px { left:-4000px; opacity:0; } 218} 219 220以下省略
試したこと
コードを見直しました。
補足情報(FW/ツールのバージョンなど)
atomで作成しています。
回答2件
あなたの回答
tips
プレビュー