CSS keyframes

[felsi]

Hallo, ich versuche gerade eine Slideshow mit CSS zu bauen. Ich habe einige Tutorials gelesen, allerdings werde ich aus den keyframes nicht so richtig schlau.

Ich habe dieses Codepen gefunden: https://codepen.io/dudleystorey/full/kFoGw

Mit 5 Bildern funktioniert das auch hervorragend. Sobald ich es aber auf 2 oder 3 Bilder reduzieren will, funktionieren die keyframes nicht mehr.

Könnte mir eventuell jemand in verständlichen Worten erklären, wie ich die keyframes anpassen muss, damit diese für 2 oder 3 Bilder funktionieren. Irgendwie stehe ich auf dem Schlauch.

Vielen Dank

 

[Andreas_]

Du musst @keyframes slidy anpassen. Für 3 Bilder sollte es so klappen:

@keyframes slidy {
0% { left: 0%; }
33% { left: 0%; }
50% { left: -100%; }
66% { left: -100%; }
75% { left: -200%; }
100% { left: -200%; }
}

Laut den Kommentaren bietet der Autor ein Script an, welches die benötigte CSS-Datei für variable Anzahlen von Bildern erstellt: CSSslidy

 

[felsi]

Cool, vielen Dank.