htmlとCSSを使ってスライドショーを完成させたいのですが、なぜか一枚目二枚目が流れた後の写真が表示されません。
一枚目と二枚目のコーディングと変わらずやったつもりだったのですが、三枚目のroad.JPGと4枚目のweb4.jpegの二つがうまく表示されず何も出てきません。
該当のソースコード
html
1<html> 2 3<head> 4 <meta charset = "UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet"> 7 8 <link rel="stylesheet" href="./scss/style.css"> 9 <title>NAVIGATION</title> 10</head> 11 12 13<body> 14 <slider> 15 <slide><p>Slide 1</p></slide> 16 <slide><p>Slide 2</p></slide> 17 <slide><p>Slide 3</p></slide> 18 <slide><p>Slide 4</p></slide> 19 20 </slider> 21 22</body>
該当のソースコード
CSS
1{ 2 margin: 0px; 3 padding: 0px; 4 box-sizing: border-box; 5} 6 7body{ 8 background: #37B3A8; 9} 10 11 12h{ 13 font-family: 'Nanum Gothic', sans-serif; 14 background-color: #37B3A8; 15 color: aliceblue; 16 text-align: center; 17} 18div { 19 max-width: 50%; 20 margin: 0 auto; 21} 22 23 24slider{ 25 display: block; 26 width: 100%; 27 height: 100%; 28 background-color: black; 29 animation: slide 12s infinite; 30 overflow: hidden; 31 position: absolute; 32} 33 34slider > * { 35 position: absolute; 36 display: block; 37 width: 100%; 38 height: 100%; 39 background: #1f1f1f; 40 animation: slide 12s infinite; 41 overflow: hidden; 42} 43 44slide:nth-child(1){ 45 left: 0%; 46 animation-delay: -1s; 47 background-image: url(/image/name.JPG); 48 background-size: cover; 49 background-position: center; 50} 51 52slide:nth-child(2){ 53 animation-delay: 2s; 54 background-image: url(/image/rainbow.JPG); 55 background-size: cover; 56 background-position: center; 57 left: 100%; 58} 59 60slide:nth-child(3){ 61 left: 0%; 62 animation-delay: 5s; 63 background-image: url(/image/road.JPG); 64 background-size: cover; 65 background-position: center; 66 left: 100% 67} 68 69slide:nth-child(4){ 70 left: 0%; 71 animation-delay: 8s; 72 background-size: cover; 73 background-image: url(/image/web4.jpeg); 74 background-position: center; 75 left:100%; 76} 77 78slide p { 79 font-family: Comfortaa; 80 font-size: 35px; 81 text-align: center; 82 display: inline-block; 83 width: 100%; 84 margin-top: 340px; 85 color: #fff; 86} 87 88@keyframes slide { 89 0% { left: 100%; width: 100%; } 90 5% { left: 0%; } 91 25% { left: 0%; } 92 30% { left: -100%; width: 100%; } 93 31% { left: -100%; width: 0%; } 94 100% { left: 100%; width: 0%; } 95} 96
補足情報
実際は、ナビゲーションバーもついているのですがその部分のhtmlとcssの部分は長いので省いています。
初めての質問なので至らない点が多々あるかもしれないですが、よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/25 12:11