Artikel-Hilfsmenü
Freitag, 10. August 2018 – aktualisiert am Donnerstag, 15. Oktober 2020
Ein Slider nur mit CSS
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
2018 war es noch ein experimentelles Feature. Heute – Stand August 2020 – unterstützen alle modernen Browser die vorgestellte Technik. Der Artikel wurde komplett überarbeitet und auf den aktuellen Stand gebracht.
Hinweis: Du benutzt leider einen Browser, der das Feature "Einrasten" (noch) nicht unterstützt.
Vielleicht willst du es einmal mit einem modernen Browser versuchen.
Ein einfacher Slider mit mehreren Bildern. Mit der Maus oder auf dem Touchpad kann man horizontal durch die Bilder scrollen. Oder, noch eleganter auf Touchscreens, durch einfaches Wischen.
Das funktioniert ganz ohne JavaScript, nur mit ein wenig CSS:
<style>
.slider {
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<div class="slider">
<img src ="bild1.jpg"><img src ="bild2.jpg"><img src ="bild3.jpg">
</div>
</div>
Das Problem dabei: Es wird nie exakt bis zum nächsten Bild gescrollt, sondern um einen mehr oder weniger zufälligen Wert, die einzelnen Bilder werden angeschnitten. Das sieht dann ganz unschön etwa so aus:
Screen Reader Nutzer haben dieses Problem übrigens nicht, sondern können ganz normal von Bild zu Bild navigieren.
Einrasten – englisch: scroll snap – pagination of carousels
Eine zusätzliche CSS-Anweisung wirkt Wunder:
scroll-snap-type: x mandatory;
Damit wird nämlich immer genau so weit gescrollt, dass das nächste Bild zur Gänze dargestellt wird. Man kann den Effekt treffend mit "Einrasten" beschreiben.
Demo mit Einrasten
Das HTML
<div id="container">
<div class="swipe">
<img width="32" alt="" aria-hidden="true" src="pfeile.png">
</div>
<div class="slider">
<img src ="bild1.jpg"><img src ="bild2.jpg"><img src ="bild3.jpg">
</div>
</div>
Anmerkung: Dass die img-Tags ohne Umbruch in einer Zeile stehen, ist beabsichtigt, und für einige alte Browser erforderlich.
Das CSS
<style>
#container {width:600px;max-width:100%;overflow:hidden;}
.slider {
display:inline-block;
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* iOS 9 */
-webkit-scroll-snap-points-x: repeat(101%);
-webkit-scroll-snap-type: mandatory;
}
.slider img {
-webkit-scroll-snap-align: center;
scroll-snap-align: center;
max-width:100%; height:auto;
vertical-align:bottom;
margin:0 6px 3px 0;
outline: none !important;
}
.slider img:last-of-type {
margin:0 0 3px 0;
}
#container:focus-within {outline: 2px dotted #555;}
.swipe {
margin-top:-2em;
}
.swipe img {
display:block;
position: relative;
top: 2.5em;
top: clamp(2.5rem, 2vmin + 2rem, 3.5rem);
left:calc(97% - 32px);
z-index:1;
}
/* Scrollbar always visible (not Firefox) */
.slider::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height:12px;
}
.slider::-webkit-scrollbar-thumb {
border-radius: 12px;
background-color: #aaa;
}
.slider::-webkit-scrollbar-corner {
background-color:transparent;
}
</style>
Das Ergebnis ist unspektakulär, tut aber genau, was es soll: "Einrasten".
Diese Technik CSS Scroll Snap funktioniert mit allen aktuellen Browsern, und vor allem auch auf Tablets und Smartphones (Android oder iOS), wo Wischen ohnehin die natürliche Bedienungsmethode ist.
Der Slider nutzt ausschließlich valides HTML und CSS, und ist selbstverständlich responsiv und barrierefrei: Bedienung auch mit der Tab-Taste. Besucher mit Screen Reader können wie gewohnt von Bild zu Bild navigieren, und die jeweiligen Alternativtexte (Bildbeschreibungen) lesen.
Weitere Details zu Scroll Snap bei developers.google.com
Auch LazyLoad ist mit Scroll Snap kombinierbar.
Eine Ergänzung zu LazyLoad war noch erforderlich: Danke an James Steinbach.
Und auch Responsive Images sind möglich.
Beide Techniken werden auf dieser Demoseite eingesetzt,
PageSpeed Insights honoriert dies mit sehr guten Bewertungen.
Nachtrag 15.10.2020
Neu: Erweiterung um Photoswipe. Damit lässt sich eine schöne, schlanke, responsive, und barrierefreie Bildergalerie erstellen.
Fotos: Unsplash.
Icon "Zwei Pfeile" von Freepik from www.flaticon.com
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
1 Kommentar
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Frank Jakob schrieb am Freitag, 28.02.20 18:02 Uhr:
Sensationell! So einfach und kompakt!