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
@layer in CSS: Kaskadenebenen statt !important-Wettrüsten
Irgendwann steht in jedem gewachsenen Stylesheet das erste !important – und ein halbes Jahr später das dreißigste. Mit @layer legst du die Reihenfolge einmal fest, und ab da gewinnt nicht mehr der längste Selektor, sondern die Ebene, die du bestimmt hast.
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.
Schöne Zeilenumbrüche in CSS – text-wrap balance und pretty
Eine Überschrift, bei der ein einzelnes Wort einsam in der letzten Zeile hängt, sieht unruhig aus. Mit text-wrap balance und pretty überlässt du dem Browser das saubere Umbrechen – ohne manuelle <br> und ohne JavaScript.