私はコーディングについてほとんど知りませんし、HTMLとCSSのスライダーを作ろうとしていました。私は3つの画像で本当に基本的なスライドショーを作成することができました。しかし、コードは3番目の後に白いイメージを置きます。私が間違ったことを誰かに教えてもらえますか?なぜ最後の画像の後ろに白いページがありますか?可能であれば、どのようにして最後のイメージの後に最初のイメージに戻ったときにそれが不安定にならないようにすることができますか?画像スライダに白いページが表示されるのはなぜですか?
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
#slider {
overflow: hidden;
width: 60%;
margin: 0 auto;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s infinite slider;
}
<div id="slider">
<figure>
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg">
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg">
</figure>
</div>
</body>
</html>
これは白いイメージではなく、ページ/ divの背景色です。色を変更すると、それに応じて白が変更されます。それが助けてくれることを願っています。 – mindaJalaj