jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool wird geladen...

Was ist CSS Carousel Generator?

Ein CSS-Carousel ist ein horizontal oder vertikal scrollbarer Container, bei dem Elemente beim Scrollen in Position einrasten. Modernes CSS (Chrome 135+) fügt integrierte Scroll-Buttons und Marker hinzu, die ohne JavaScript funktionieren, sowie Scroll-State-Queries zur Gestaltung des aktuell eingerasteten Elements. Dies ist eine native Alternative zu JavaScript-Carousel-Bibliotheken.

Kurze Antwort

Erstellen Sie ein natives CSS-Carousel mit scroll-snap, Buttons und Markern —kein JavaScript erforderlich. Verwenden Sie scroll-snap-type für das Einrastverhalten, ::scroll-button() für Pfeile, ::scroll-marker() für Punkte und scroll-state(snapped: true)-Queries für die Gestaltung des aktiven Elements. Chrome 135+ für volle Funktionen; funktioniert andernorts abwärtskompatibel.

Last updated: 2026-05-28

Einschränkungen

  • Scroll-Buttons (::scroll-button()) und Marker (::scroll-marker()) erfordern Chrome 135+. Firefox und Safari unterstützen sie noch nicht. Das Carousel fällt auf einen standardmässigen scrollbaren Container zurück.
  • CSS-Carousels können ohne JavaScript nicht automatisch fortfahren, endlos schleifen oder dynamische Elementanzahlen verarbeiten. Für erweiterte Carousel-Funktionen verwenden Sie eine kleine JS-Erweiterung auf Basis des CSS-Fundaments.
  • Scroll-State-Queries (container-type: scroll-state) sind Teil derselben Chrome 135+-Veröffentlichung. Die browserübergreifende Unterstützung für die Gestaltung aktiver Elemente erfordert einen JavaScript-Fallback.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie die Layoutrichtung (horizontal oder vertikal) und die Elementbreite.
  2. Legen Sie das Einrastverhalten und die Ausrichtung fest —mandatory rastet bei jedem Element ein, proximity rastet ein, wenn in der Nähe.
  3. Fügen Sie optional Scroll-Buttons und Marker-Punkte zur Navigation hinzu.
  4. Wählen Sie zug盲ngliches Listen-Markup (ul/li) und die Anzahl der Elemente für die Demo-Ausgabe.
  5. Kopieren Sie CSS und HTML in Ihre Seite. Fügen Sie echte Inhalte in jedes Carousel-Element ein.

Wofür du es nutzen kannst

  • Ein Produktbild-Carousel erstellen, ohne eine JavaScript-Bibliothek hinzuzufügen.
  • Eine Kartenleiste für Blog-Beiträge oder App-Store-artige Auflistungen erstellen.
  • Eine zug盲ngliche Bildergalerie mit tastaturnavigierbarem Scrollen und Einrastpunkten erstellen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Produktbildergalerie

Eine E-Commerce-Produktseite benötigt ein horizontales Bild-Carousel. Verwenden Sie das Tool mit mandatory snap, start-Ausrichtung und Scroll-Markern. Besucher wischen oder scrollen durch Produktbilder, wobei Indikatorpunkte die Position anzeigen.

Beispiel

Blogbeitrag-Kartenleiste

Eine Blog-Startseite zeigt aktuelle Beiträge in einer horizontal scrollbaren Kartenleiste. Verwenden Sie proximity snap mit Scroll-Buttons, damit Besucher auf Pfeile klicken oder wischen können, um durch aktuelle Artikel zu blättern.

Haufige Fehler

  • Mandatory snap bei sehr langen Carousels verwenden —Benutzer können nicht schnell über mehrere Elemente scrollen, was sich tr盲ge anfühlt.
  • Vergessen, den Scroll-Container tastaturfokussierbar zu machen —Tastaturnutzer benötigen tabindex='0', um mit Pfeiltasten zu scrollen.
  • Feste Pixelbreiten ohne Berücksichtigung mobiler Geräte verwenden —300px-Elemente auf einem 320px-Bildschirm lassen kaum einen Einblick in das nächste Element.

Überprüfung

  1. Testen Sie das Carousel mit Tastaturnavigation: Fokussieren Sie den Container und verwenden Sie die Pfeiltasten, um durch die Elemente zu scrollen.
  2. Überprüfen Sie, ob die Einrastpunkte auf Touch-Geräten korrekt funktionieren —jede Wischbewegung sollte zum nächsten Element einrasten.

FAQ

Fragen zu CSS Carousel Generator

Welche Browser unterstützen CSS-Scroll-Buttons und -Marker?

Scroll-Buttons (::scroll-button()) und Marker (::scroll-marker()) erfordern Chrome 135+. Scroll-snap selbst wird in allen modernen Browsern unterstützt (Chrome 69+, Firefox 99+, Safari 11+). Das Carousel degradiert anmutig: Browser ohne Button/Marker-Unterstützung zeigen einen standardmässigen scrollbaren Container mit Einrastverhalten.

Ben枚tige ich JavaScript für ein CSS-Carousel?

Für grundlegendes Scroll- und Einrastverhalten wird kein JavaScript benötigt. Scroll-Buttons und Marker funktionieren deklarativ in Chrome 135+. Für Funktionen wie automatischen Fortschritt, Endlosschleife oder dynamische Elementanzahl ist weiterhin eine kleine Menge JavaScript erforderlich. Dieses Tool generiert die JS-freie Basis.

Wie gestalte ich das aktive Carousel-Element anders?

Verwenden Sie die scroll-state()-Container-Query: @container scroll-state(snapped: true) { .item { opacity: 1; } }. Dies erfordert container-type: scroll-state auf dem Scroll-Container. Für Browser ohne scroll-state-Unterstützung verwenden Sie einen JavaScript-Scroll-Event-Fallback oder IntersectionObserver.

Verwandte Tools

Weitere css-tools

Auch ausprobieren

Auch ausprobieren