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.