1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Css slider

Dieses Thema im Forum "CSS" wurde erstellt von Andrin Spitzer, 20. März 2017 um 22:08 Uhr.

  1. Andrin Spitzer

    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/

    HTML:
    1. <div class="scrollable">
    2.     <div class="items">
    3.         <img src="http://placehold.it/333x500/E8117F/FFFFFF&text=Horizontal"/>
    4.         <img src="http://placehold.it/333x500/FFFFFF/E8117F&text=css3"/>
    5.         <img src="http://placehold.it/333x500/3D668F/FFFFFF&text=slide show"/>
    6.     </div>
    7. </div>
    Code (CSS):
    1. .scrollable {
    2.     width: 333px;
    3.     margin: 0 auto;
    4.     padding: 0;
    5.     border:10px solid #fff;
    6.     background: #000;
    7.     position: relative;
    8.     overflow: hidden;
    9.     text-align: center;
    10. }
    11. img {
    12.     max-width: 333px;
    13.     margin: 0;
    14.     float:left;
    15. }
    16. .items {
    17.     width:999px;
    18.     -webkit-animation: hscroll 12s infinite;
    19.     -moz-animation: hscroll 12s infinite;
    20.     -ms-animation: hscroll 12s infinite;
    21. }
    22.  
    23. @-webkit-keyframes hscroll {
    24.   0%   { margin-left: 0; }
    25. 27.33%  { margin-left: 0 }
    26.   33.33%  { margin-left: -333px; }
    27. 60.66% { margin-left: -333px; }
    28. 66.66% { margin-left: -666px; }
    29. 94.99% { margin-left: -666px; }
    30.   100%  { margin-left: 0 }
    31. }
    32.  
    33. @-moz-keyframes hscroll {
    34.   0%   { margin-left: 0; }
    35. 27.33%  { margin-left: 0 }
    36.   33.33%  { margin-left: -333px; }
    37. 60.66% { margin-left: -333px; }
    38. 66.66% { margin-left: -666px; }
    39. 94.99% { margin-left: -666px; }
    40.   100%  { margin-left: 0 }
    41. }
    42.  
    43. @-ms-keyframes hscroll {
    44.   0%   { margin-left: 0; }
    45. 27.33%  { margin-left: 0 }
    46.   33.33%  { margin-left: -333px; }
    47. 60.66% { margin-left: -333px; }
    48. 66.66% { margin-left: -666px; }
    49. 94.99% { margin-left: -666px; }
    50.   100%  { margin-left: 0 }
    51. }
     
  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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.
     
Die Seite wird geladen...