Slider und Karussell mit CSS scroll-snap – ohne Bibliothek

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

• CSS scroll snap – MDN Web Docs
• Well-controlled scrolling with CSS scroll snap (web.dev)