Karussells ohne JavaScript: was CSS 2026 mit ::scroll-button und ::scroll-marker plötzlich selbst kann

Es gibt eine Anfrage, die kommt bei fast jeder Website: „Können wir oben so einen Slider machen, der durch die Bilder blättert?" Und jahrelang war meine ehrliche Antwort ein leises Seufzen. Nicht, weil es schwer war – sondern weil ein Karussell fast immer bedeutete: eine fertige JavaScript-Bibliothek einbinden. Ein paar Dutzend Kilobyte extra, die jeder Besucher lädt, nur damit drei Bilder hin- und herrutschen. Auf einer Seite, die sonst schlank und schnell ist, tut das weh.

Diese Woche habe ich mir angeschaut, wie weit das ohne JavaScript inzwischen trägt – und es ist deutlich weiter, als ich dachte.

Was sich gerade ändert

Seit Chrome 135 bringt CSS zwei Dinge mit, die genau dieses Problem lösen: Blätter-Knöpfe (::scroll-button()) und Navigationspunkte (::scroll-marker). Beides erzeugt der Browser selbst aus deinem HTML – als echte, bedienbare Knöpfe. Kein <script>, kein externes Paket, keine 40 Kilobyte.

Die Grundlage ist eine simple Scroll-Leiste mit „Einrasten" (scroll-snap), die es ohnehin seit Jahren gibt. Neu ist, dass der Browser um diese Leiste herum jetzt die ganze Bedienung dazubaut:

• Pfeil-Knöpfe zum Vor- und Zurückblättern. Sie scrollen automatisch rund 85 % der sichtbaren Breite weiter und schalten sich am Anfang bzw. Ende von selbst inaktiv.
• Punkte unter dem Karussell – für jedes Element einen. Der Browser hält den aktiven Punkt automatisch nach, und ein Klick springt zum passenden Bild.
• Tastatur und Screenreader sind von Haus aus dabei, weil es unter der Haube echte <button>- und Link-Elemente sind. Genau das ist bei den selbstgebauten JavaScript-Karussells so oft der Schwachpunkt.

Wie das aussieht

Das Markup bleibt banal – eine Liste von Elementen in einem Container. Die ganze Magie steckt im CSS:

.karussell {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* rastet pro Bild ein */
  /* Punkte-Leiste unter dem Karussell erzeugen: */
  scroll-marker-group: after;
}

.karussell > .folie {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* Vor- und Zurück-Knopf – der Browser macht sie funktionsfähig */
.karussell::scroll-button(inline-start) { content: "‹"; }
.karussell::scroll-button(inline-end)   { content: "›"; }

/* Für jede Folie ein Punkt */
.karussell > .folie::scroll-marker {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
}

/* Der Punkt der gerade sichtbaren Folie */
.karussell > .folie::scroll-marker:target-current {
  background: #0f172a;
}

Das war es. Keine Zeile JavaScript, und trotzdem hat das Karussell Knöpfe, Punkte, Tastaturbedienung und saubere Screenreader-Semantik. Für eine Startseite, die schnell laden soll, ist das ein echter Gewinn – weniger Code heißt weniger, das kaputtgehen kann.

Die ehrliche Grenze

Und jetzt der Teil, den viele Tutorials weglassen: Das ist noch nicht überall verfügbar. Chrome und Edge können es, Firefox und Safari arbeiten daran, aber sind noch nicht so weit. Damit gehört das Feature offiziell noch nicht zu „Baseline" – dem Stand, den man ohne Bauchschmerzen für alle ausliefert.

Für die Praxis heißt das nicht „Finger weg", sondern „mit Netz". Der Trick ist, dass die Basis – die einrastende Scroll-Leiste – in jedem Browser funktioniert. Man kann also durch Wischen immer blättern. Die Knöpfe und Punkte kommen einfach obendrauf, wo der Browser sie kann, und fehlen sonst, ohne dass etwas bricht. Auf einer Touch-Seite ist das oft völlig ausreichend; wo ich am Desktop verlässliche Pfeile brauche, blende ich für ältere Browser schlichte HTML-Knöpfe ein. So oder so ist das weit weniger Aufwand – und weit weniger Ballast – als eine komplette Bibliothek.

Wenn du auf deiner Seite gerade noch ein schweres Slider-Plugin mitschleppst, lohnt sich der Blick: Für viele Fälle reicht heute eine Handvoll CSS-Zeilen. Ich baue Websites bewusst so, dass sie schlank bleiben und lange halten – wenn du deine Seite in diese Richtung entwickeln willst, meld dich gern über bymw.de.

Quellen

• Carousels with CSS – Chrome for Developers
• ::scroll-marker – MDN Web Docs
• ::scroll-button() – MDN Web Docs