Css slider

[Andrin Spitzer]

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/

<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>

.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 }
}

 

[Sempervivum]

Das ist machbar, wenn man die Werte statt in px in % angibt:
https://jsfiddle.net/Sempervivum/8a6k4/167/

Berücksichtige:

• Dabei werden die Bilder, je nach Bildschirmgröße, vergrößert, was zu einem Qualitätsverlust führt.
• Man kann vieles mit reinem CSS machen, so auch dieses, aber man sollte sich fragen, ob das auch zu empfehlen ist: Solch eine Lösung ist sehr umständlich zu ändern, weil jedesmal, wenn sich die Anzahl der Bilder ändert, eine Vielzahl von Werten neu berechnet werden muss. Bei einem Slider-Plugin mit JS oder jQuery können solche Berechnungen automatisch erfolgen und man muss nur den HTML-Text ändern.