Html Code

<div id="outerbox">
<div id="sliderbox">
<img src="image/Xiaomi.jpg">
<img src="image/Xiaomi2.jpg">
<img src="image/Xiaomi.jpg">
<img src="image/Xiaomi2.jpg">
<img src="image/Xiaomi.jpg">
</div>
</div>

css Code

#outerbox {
width: 100vw !important;
height: 60vh;
overflow:hidden;
}
#sliderbox {
position:relative;
width:6000px;
animation-name:sliding;
animation-duration:20s;
animation-iteration-count:infinite;
}

#sliderbox img {
float:left;
}

@keyframes sliding {
0%{
left:0px;
}
20% {
left:0px;
}
25% {
left:-1200px;
}
45% {
left:-1200px;
}
50% {
left:-2400px;
}
70% {
left:-2400px;
}
75% {
left:-3600px;
}
95% {
left:-3600px;
}
100% {
left:-4800px;
}
}


ich versuche einen Slider zu erstellen, der über die gesamte breite des Bildschirmes verläuft und eine Höhe von etwa 60% der Bildschirmhöhe enthält.
Die Höhe habe ich ganz gut hinbekommen doch leider erscheinen die Bilder nicht über die gesamte Bildschirmbreite. Kann mir da jmd. weiterhelfen???
Ich möchte hier ungerne Pixelangaben machen, sondern vielmehr mit Prozenten arbeiten. Sprich 100% Breite und 60% Höhe des gesamten Bildschirmes.

Danke im Voraus.

Die Pixelangaben sind ja auch der Übeltäter. Auch dass Du den Bildern keine Breite gibst.

Wenn Du dem #sliderbox eine Breite von 6000px gibst, setzt dass voraus, dass nicht nur die (fünf) Bilder eine Breite von je 1200px haben, sondern dass auch das Browser-Fenster exakt 1200px breit ist. Das Letztere dürfte nur zufällig der Fall sein.

Folgende Breiten (-Verhältnisse) wären bei insgesamt fünf Bilder sinnvoll:
#outerbox → 100%, #sliderbox → 500%, img → 20%
oder
#outerbox → 100vw, #sliderbox → 500%, img → 20%
oder
#outerbox → 100vw, #sliderbox → 500vw, img → 20%
oder
#outerbox → 100vw, #sliderbox → 500vw, img → 100vw
oder
#outerbox → 100%, #sliderbox → 500vw, img → 100vw
usw.
Es sind bestimmt noch 3-4 Kombinationen möglich.

Dazu noch:
da die Bilder Floaten, würde ich dafür sorgen, dass die Floats eingeschlossen werden. Auch wenn das sonst keine negative optische Effekte verursacht.
Beispielsweise auch dem #sliderbox ein „overflow: hidden“ oder ein „display: inline-box“ geben.

.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/