Bilder zu ImageSlider dazufügen
Hallo,
ich habe mir von der codepen.io Seite einen Imageslider geholt, dieser funktioniert gut für 4 Bilder, im HTML sind 5, da das letzte wie das erste ist für den schönen Übergang.
Nun wollte ich einfach ein 6,7 tes usw. dazufügen,
aber egal was ich in den CSS ändere es passt nie?
Entweder sind dann alle zu lang, kurz, plötzlich ist eine schwarze Fläche darunter wie ein weiterer Platzhalter…
Am sinnvollsten erschien mir noch: 5 Bilder 500 %, dann sind 6 Bilder 600 %,
auch das geht nicht,
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
@keyframes slidy {
0% {
left: 0%;
}
8% {
left: 0%;
}
10% {
left: -100%;
}
18% {
left: -100%;
}
20% {
left: -200%;
}
28% {
left: -200%;
}
30% {
left: -300%;
}
38% {
left: -300%;
}
40% {
left: -400%;
}
48% {
left: -400%;
}
50% {
left: -500%;
}
58% {
left: -500%;
}
60% {
left: -600%;
}
68% {
left: -600%;
}
70% {
left: -700%;
}
78% {
left: -700%;
}
80% {
left: -800%;
}
88% {
left: -800%;
}
90% {
left: -900%;
}
100% {
left: -900%;
}
}
figure {
background: #101010;
font-family: Bradley Hand ITC;
}
#captioned-gallery {
width: 90%;
height:90vh;
overflow: hidden;
margin:0 auto;
}
div.slider {
position: relative;
width: 1000%;
height:100%;
font-size: 0;
display:flex;
animation: 20s slidy infinite;
}
div.slider figure {
text-align:center;
width:calc(100%/10);
}
div.slider figure img {
height:90%;
}
div.slider figure figcaption {
background: rgba(0, 0, 0, 0.4);
color: #fff;
width: 100%;
text-align:center;
font-size: 2rem;
}
</style>
<div id="captioned-gallery">
<div class="slider">
<figure>
<img src="/image/3.png" alt>
<figcaption>Bild1</figcaption>
</figure>
<figure>
<img src="/image/4.png" alt>
<figcaption>Bild2</figcaption>
</figure>
<figure>
<img src="/image/5.png" alt>
<figcaption>Bild3</figcaption>
</figure>
<figure>
<img src="/image/6.png" alt>
<figcaption>Bild4</figcaption>
</figure>
<figure>
<img src="/image/7.png" alt>
<figcaption>Bild5</figcaption>
</figure>
<figure>
<img src="/image/8.png" alt>
<figcaption>Bild6</figcaption>
</figure>
<figure>
<img src="/image/9.png" alt>
<figcaption>Bild7</figcaption>
</figure>
<figure>
<img src="/image/10.png" alt>
<figcaption>Bild8</figcaption>
</figure>
<figure>
<img src="/image/11.png" alt>
<figcaption>Bild9</figcaption>
</figure>
<figure>
<img src="/image/3.png" alt>
<figcaption>Bild1</figcaption>
</figure>
</div>
</div>