cssのみのスライダーで画像が一枚だけ表示されない

スライドの画像が一枚だけ表示されません

cssのみでのスライダーを作成してます。
5枚のスライダーのサンプルをコピペして6枚に変更しようとしてるのですが、6枚目の画像が表示されません。どこが間違ってますでしょうか？

cssコピペして使用するレベルのスキルです。

該当のソースコード

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><div id="slider">
<figure>
<img src="https://24.media.tumblr.com/61e1f6d73861cfad6e320c6d5dcecc6e/tumblr_mx3trrzUOJ1st5lhmo1_1280.jpg" alt="">
<img src="https://31.media.tumblr.com/3afad829ce330a66b3bbb98831c1c393/tumblr_mx3tpto69r1st5lhmo1_1280.jpg" alt="">
<img src="https://25.media.tumblr.com/d7c46e775fa6d6c613f10bceb2703b38/tumblr_mx3tqsqckF1st5lhmo1_1280.jpg" alt="">
<img src="https://31.media.tumblr.com/3afad829ce330a66b3bbb98831c1c393/tumblr_mx3tpto69r1st5lhmo1_1280.jpg" alt="">
<img src="https://25.media.tumblr.com/d7c46e775fa6d6c613f10bceb2703b38/tumblr_mx3tqsqckF1st5lhmo1_1280.jpg" alt="">
<img src="https://31.media.tumblr.com/3afad829ce330a66b3bbb98831c1c393/tumblr_mx3tpto69r1st5lhmo1_1280.jpg" alt="">
</figure>
</div>
</body>
</html>

該当のソースコード

@keyframes slidy {
0% { left: 0%; }
11% { left: 0%; }
    
16% { left: -120%; }
27% { left: -120%; }    
    
32% { left: -240%; }
43% { left: -240%; }
    
48% { left: -360%; }
61% { left: -360%; }
    
66% { left: -480%; }
81% { left: -480%; }
    
95% { left: -600%; }
100% { left: 0%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%;hight:auto; float: left; }
div#slider figure { 
  position: relative;
  width: 600%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 5s slidy infinite; 
}

補足情報

https://www.webdesign-tch.org/html/419/
4. CSS slider full
のソースを使用

行動規範の内容に同意します

回答1件

ベストアンサー

子要素(figure img)の幅が20%なので、1行に5枚しか並ばずに、6枚目は改行されてしまいます。
幅を 100÷6≒16.66%にすればいいでしょう。
アニメーションの移動幅もそれに合わせて、100%にします。

css
1@keyframes slidy {
2  0% { left: 0%; }
3  11% { left: 0%; }
4
5  16% { left: -100%; }
6  27% { left: -100%; }    
7
8  32% { left: -200%; }
9  43% { left: -200%; }
10
11  48% { left: -300%; }
12  61% { left: -300%; }
13
14  66% { left: -400%; }
15  81% { left: -400%; }
16
17  95% { left: -500%; }
18  100% { left: -500%; }
19}
20
21body { margin: 0; } 
22div#slider { overflow: hidden; }
23div#slider figure img {
24  width: 16.66%;
25  hight:auto;
26  float: left;
27}
28div#slider figure { 
29  position: relative;
30  width: 600%;
31  margin: 0;
32  left: 0;
33  text-align: left;
34  font-size: 0;
35  animation: 5s slidy infinite; 
36}