Gretchenfrage an die Spezialisten,

ich habe einen Slider in einr HTML-Box und er funktioniert auch.

Nur kann ich hier nur 5 Bilder einfügen und bräuchte mehr ???

Wie und was muss ich Ändern ???

Danke im Vorraus

Hier mal die HTML:

<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="./files/slider01.jpg" alt>
<figcaption>Besuche Sie uns in unserer neuen Ausstellungshalle</figcaption>
</figure>
<figure>
<img src="./files/slider02.jpg" alt>
<figcaption>Bild 2</figcaption>
</figure>
<figure>
<img src="./files/slider03.jpg" alt>
<figcaption>Bild 3</figcaption>
</figure>
<figure>
<img src="./files/slider04.jpg" alt>
<figcaption>Bild 4</figcaption>
</figure>
<figure>
<img src="./files/slider05.jpg" alt>
<figcaption>Bild 5</figcaption>
</figure>
</figure>
</div>

CSS:

@keyframes slider {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
90% { left: -300%; }
95% { left: -400%; }
100% { left: -400%; }
}
* {box-sizing: border-box;}
figure { margin: 0; background: #000000; font-family: Open Sans Serif, sans-serif; font-weight: 100;}
div#captioned-gallery { width: 100%; overflow: hidden; }
figure.slider { position: relative; width: 500%; font-size: 0; animation: 30s slider infinite; }
figure.slider figure { position: relative; width: 20%; height: auto; display: inline-block; position: inherit; }
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption { position: absolute; bottom: 0; background: rgba(0,0,0,0.6); color: #fff; width: 100%; font-size: 2rem; padding: .6rem; }