Du hast schon richtig erkannt: Wenn Du dein Ziel erreichen willst, musst Du konsequent mit Prozent- statt Pixel-Angaben arbeiten. Ich habe es mal so gemacht:
HTML
<!DOCTYPE html><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="outerbox">
<div id="sliderbox">
<img src="images/01.png"><img src="images/02.png"><img src="images/03.png"><img src="images/04.png">
</div>
</div>
<style>
#outerbox {
width: 100vw !important;
height: auto;
overflow: hidden;
}
#sliderbox {
position: relative;
width: 400%;
animation-name: sliding;
animation-duration: 20s;
animation-iteration-count: infinite;
}
#sliderbox img {
width: 25%;
}
@keyframes sliding {
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: 0%;
}
}
</style>
</body> </html>Ist sicherlich eine interessante Aufgabe, so etwas nur mit CSS zu machen, aber ich finde, nicht alles, was machbar ist, ist auch sinnvoll. Vor allem die Änderungsfreundlichkeit beim Hinzufügen neuer Bilder lässt zu wünschen übrig, weil man alle Prozentangaben neu berechnen muss. Bei einem Slider mit Javascript ist es kein Problem, ihn so anzulegen, dass man nur die Bilder hinzu fügt und alles andere passt sich automatisch an.