Reibungslose Karussells mit reinem CSS erstellen

Jahrelang bedeutete das Erstellen von Karussells, auf JavaScript-Bibliotheken wie Swiper oder Glide zurückzugreifen. Jede fügte Kilobytes zu Ihrem Bundle hinzu, führte Abhängigkeiten ein und erforderte eine sorgfältige Verwaltung von Event-Listenern und State. Doch modernes CSS hat sich still und leise weiterentwickelt, um Karussells nativ zu handhaben – ganz ohne JavaScript.

Dieser Artikel untersucht, wie man performante, barrierefreie CSS-Karussells mit scroll-snap, experimentellen Pseudo-Elementen und anderen reinen CSS-Techniken erstellt, die heute funktionieren und noch Jahre lang relevant bleiben werden.

Die Grundlage: Scroll Snap CSS

Der Grundpfeiler jedes reinen CSS-Karussells ist die scroll-snap-Eigenschaft. Sie verwandelt einen scrollbaren Container mit nur wenigen Zeilen in ein paginiertes Erlebnis:

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

Dies erstellt ein horizontales Karussell, bei dem jedes Element einrastet. Das Schlüsselwort mandatory stellt sicher, dass Benutzer immer auf einer vollständigen Folie landen, während scroll-behavior: smooth fließende Übergänge zwischen den Elementen hinzufügt.

Scroll Snap CSS funktioniert in allen modernen Browsern und ist damit die zuverlässigste Grundlage für JavaScript-freie Karussells. Für responsive Designs kombinieren Sie es mit CSS Grid oder passen Sie die flex-basis an, um mehrere Elemente pro Ansicht anzuzeigen:

.carousel-item {
  flex: 0 0 calc(33.333% - 1rem);
  margin: 0 0.5rem;
}

Moderne Navigation: Experimentelle Pseudo-Elemente

Chrome 135+ führt experimentelle Pseudo-Elemente ein, die automatisch Karussell-Steuerelemente generieren. Diese Features erfordern die Aktivierung experimenteller Webplattform-Features in den Chrome-Flags.

Das Pseudo-Element ::scroll-button erstellt Zurück-/Weiter-Schaltflächen ohne zusätzliches Markup:

.carousel::scroll-button(inline-start),
.carousel::scroll-button(inline-end) {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 1rem;
  border: none;
}

.carousel::scroll-button(inline-start)::before {
  content: "←";
}

.carousel::scroll-button(inline-end)::before {
  content: "→";
}

Ähnlich generiert ::scroll-marker Paginierungspunkte für jeden scrollbaren Abschnitt:

.carousel {
  scroll-marker-group: after;
}

.carousel-item::scroll-marker {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.carousel-item::scroll-marker:target-current {
  background: #333;
}

Beachten Sie, dass diese Pseudo-Elemente experimentell sind und sich ihre Syntax ändern kann. Die Pseudo-Klasse :target-current hebt den aktiven Marker hervor, während Benutzer scrollen. Diese Features reduzieren JavaScript-Anforderungen und bieten gleichzeitig native Barrierefreiheits-Unterstützung.

Fallback-Strategie für den Produktiveinsatz

Da scroll-button und scroll-marker nur begrenzte Browser-Unterstützung haben, verwenden Sie Feature Detection mit @supports:

/* Fallback-Navigation */
.carousel-nav {
  display: flex;
  gap: 0.5rem;
}

/* Fallback ausblenden, wenn native Steuerelemente unterstützt werden */
@supports (scroll-button-inline: both) {
  .carousel-nav {
    display: none;
  }
}

Für breitere Kompatibilität kombinieren Sie scroll-snap mit Anker-Links für die Navigation:

<nav class="carousel-nav">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
  <a href="#slide3">3</a>
</nav>

<div class="carousel">
  <div id="slide1" class="carousel-item">...</div>
  <div id="slide2" class="carousel-item">...</div>
  <div id="slide3" class="carousel-item">...</div>
</div>

CSS-Autoplay-Karussell ohne JavaScript

Das Erstellen eines CSS-Autoplay-Karussells erfordert nur Keyframe-Animationen:

@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-100%); }
  50%, 70% { transform: translateX(-200%); }
  75%, 95% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.autoplay-carousel {
  display: flex;
  animation: slide 12s infinite;
}

.autoplay-carousel:hover {
  animation-play-state: paused;
}

Diese Technik funktioniert zuverlässig, tauscht aber Benutzerkontrolle gegen Einfachheit. Das Pausieren beim Hovern verbessert die Benutzerfreundlichkeit, und die Kombination mit prefers-reduced-motion respektiert Barrierefreiheits-Präferenzen:

@media (prefers-reduced-motion: reduce) {
  .autoplay-carousel {
    animation: none;
  }
}

Barrierefreiheit und Performance

Reine CSS-Karussells glänzen bei der Performance – kein JavaScript-Parsing, keine Event-Listener, kein Layout-Thrashing. Das native Scrolling des Browsers verarbeitet Touch-, Tastatur- und Maus-Eingaben automatisch.

Für Barrierefreiheit stellen Sie sicher:

• Scroll-snap bietet sanftes Scrollen, aber vollständige Tastaturnavigation und barrierefreie Steuerelemente erfordern die neuen Features ::scroll-button und ::scroll-marker.
• Fokus-Indikatoren bleiben sichtbar
• Inhalte bleiben zugänglich, wenn CSS fehlschlägt
• Touch-Targets erfüllen die Mindestgröße von 44×44px

Fügen Sie ARIA-Labels hinzu, um die Screenreader-Erfahrung zu verbessern:

<div class="carousel" role="region" aria-label="Produktgalerie">
  <div class="carousel-item" aria-label="Folie 1 von 3">...</div>
</div>

Fazit

Modernes CSS hat die Notwendigkeit von JavaScript-Karussell-Bibliotheken in den meisten Fällen eliminiert. Scroll-snap bietet heute die Grundlage, während aufkommende Features wie scroll-button und scroll-marker eine Zukunft vorwegnehmen, in der komplexe UI-Komponenten null JavaScript benötigen. Diese Techniken reduzieren Bundle-Größen, verbessern die Performance und vereinfachen die Wartung – Vorteile, die sich im Laufe der Zeit potenzieren.

Beginnen Sie mit scroll-snap für Produktiv-Websites. Experimentieren Sie mit den neuen Pseudo-Elementen in Chrome. Am wichtigsten ist: Hinterfragen Sie, ob Sie diese 50KB-Karussell-Bibliothek benötigen, wenn 20 Zeilen CSS das gleiche Ergebnis erzielen.

Häufig gestellte Fragen (FAQs)

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..