Slider und Karussell mit CSS scroll-snap – ohne Bibliothek
Ein wischbares Karussell, das sauber an jeder Karte einrastet, brauchst du nicht per JavaScript zu bauen. Mit scroll-snap sagst du dem Browser, wo der Scroll stehenbleiben soll – flüssig, mit Touch und Trackpad.
Karussells und horizontale Slider waren lange ein Grund, eine JavaScript-Bibliothek einzubinden. Für den Einrast-Effekt reicht heute reines CSS: scroll-snap. Der Browser lässt den Scroll an definierten Punkten „einrasten".
Der horizontale Slider
.slider {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory; /* horizontal einrasten, verbindlich */
-webkit-overflow-scrolling: touch;
}
.slide {
flex: 0 0 80%; /* jede Karte 80 % breit */
scroll-snap-align: center; /* mittig einrasten */
}<div class="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>Zwei Zutaten reichen: scroll-snap-type auf dem Container (Richtung x + Stärke mandatory) und scroll-snap-align auf jedem Kind (wo es einrasten soll: start, center oder end).
mandatory vs. proximity
mandatory: rastet immer am nächsten Punkt ein – klare Karussell-Optik.proximity: rastet nur ein, wenn du nah genug loslässt – sanfter, freieres Scrollen.
Für lange Inhalte in den Karten ist proximity angenehmer, sonst „springt" der Browser dem Nutzer ins Gehege.
Rand-Abstand mit scroll-padding
Damit die eingerastete Karte nicht am Rand klebt (z. B. unter einer fixierten Kopfzeile), gibst du dem Container ein scroll-padding:
.slider { scroll-padding-inline: 16px; }Sauber ohne sichtbare Scrollbar
.slider { scrollbar-width: none; } /* Firefox */
.slider::-webkit-scrollbar { display: none; } /* Chrome/Safari */Das Ergebnis fühlt sich nativ an – mit Touch, Trackpad und Mausrad – und kommt ohne eine einzige Zeile JavaScript aus.
Wenn du eine moderne, schnelle Website mit solchen Interaktionen willst, baue ich dir das – meld dich über bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.
color-mix() – Hover- und Dark-Mode-Farben ausrechnen lassen, statt sie zu pflegen
Für jede Markenfarbe eine hellere, eine dunklere und eine transparente Variante von Hand zu pflegen, ist Fleißarbeit mit Fehlerquote. color-mix() mischt sie im Browser – aus genau einer Quellfarbe.