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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1824閲覧

自動スライドショーを無限にしたい

renmo

総合スコア17

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/12/14 06:29

前提・実現したいこと

画像を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で作成しています。

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

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

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

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

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

m.ts10806

2018/12/14 06:38

swiperの記述が見受けられますが、こちらは使われていないのでしょうか(または本件とどう関係するのでしょうか)
renmo

2018/12/14 07:03

すみません。 htmlの下記にあるswiperのJavaScriptはページネーションで使用しているものだと思います。 本件とは関係ないですが記述してしまっていました。ご指摘ありがとうございます。
m.ts10806

2018/12/14 07:06 編集

了解です。htmlも全体提示されてて、でもhtml中に対象のクラスが設置されてなかったので、あれ?と思いまして。
guest

回答2

0

ベストアンサー

@keyframesの最後、100%のところが"1000px"になっています。100%に直してみてください。

投稿2018/12/18 00:55

CODEISLE

総合スコア251

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

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

0

試していませんが。。。
プラグイン【Swiper】で作成するスライドショーいろいろ

javascript

1var mySwiper = new Swiper('.swiper-container', { 2 3 // スライドショーの設定(各パラメーターを入力) 4 speed: 500, 5 loop: true 6 7 pagination: { 8 el: '.swiper-pagination', 9 type: 'bullets', 10 clickable: true, 11 dynamicBullets: true, 12 dynamicMainBullets: 1, 13 } 14});

投稿2018/12/14 06:40

mayoi_maimai

総合スコア1583

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

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

renmo

2018/12/18 00:36

返信遅れて申し訳ありません。うまく行きませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問