Andrin Spitzer
Mitglied
Guten Tag
kann mir jemand helfen diesen Code so umzuschreiben das der slider eine breite fon 100% hat und die Bilder trotzdem nur einzeln zu sehen sind wen ich den Code umschreibe sieht man alle Bilder ein wenig und das ist ja nicht der sin fon der sache.
https://jsfiddle.net/8a6k4/165/
kann mir jemand helfen diesen Code so umzuschreiben das der slider eine breite fon 100% hat und die Bilder trotzdem nur einzeln zu sehen sind wen ich den Code umschreibe sieht man alle Bilder ein wenig und das ist ja nicht der sin fon der sache.
https://jsfiddle.net/8a6k4/165/
HTML:
<div class="scrollable">
<div class="items">
<img src="http://placehold.it/333x500/E8117F/FFFFFF&text=Horizontal"/>
<img src="http://placehold.it/333x500/FFFFFF/E8117F&text=css3"/>
<img src="http://placehold.it/333x500/3D668F/FFFFFF&text=slide show"/>
</div>
</div>
CSS:
.scrollable {
width: 333px;
margin: 0 auto;
padding: 0;
border:10px solid #fff;
background: #000;
position: relative;
overflow: hidden;
text-align: center;
}
img {
max-width: 333px;
margin: 0;
float:left;
}
.items {
width:999px;
-webkit-animation: hscroll 12s infinite;
-moz-animation: hscroll 12s infinite;
-ms-animation: hscroll 12s infinite;
}
@-webkit-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}
@-moz-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}
@-ms-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}