Universell einsetzbar

Carousel funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/carousel) — die Library erkennt die Umgebung automatisch.

Carousel

Carousel rendert eine horizontal gleitende Ansicht von Inhalten mit optionalem Autoplay, Loop, Navigationspfeilen und Pagination-Punkten.

---

Übersicht

import { Carousel } from "@prokodo/ui/carousel"
;<Carousel
  items={[
    { key: "1", content: <img src="/slide1.jpg" alt="Slide 1" /> },
    { key: "2", content: <img src="/slide2.jpg" alt="Slide 2" /> },
  ]}
  autoplay
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Carousel } from "@prokodo/ui/carousel"

CSS:

import "@prokodo/ui/carousel.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
children	ReactNode	—	✅	Slide-Elemente im Carousel.
autoplay	number	—	—	Autoplay-Intervall in ms (0 = deaktiviert).
enableControl	boolean	true	—	Vor-/Zurück-Buttons anzeigen.
enableDots	boolean	true	—	Punkt-Indikatoren anzeigen.
translateX	number	—	—	Manuelles Slide-Offset.
itemStyle	React.CSSProperties	—	—	Inline-Styles pro Slide.
itemsToShow	number	1	—	Gleichzeitig sichtbare Items.
responsive	CarouselResponsive[]	—	—	Breakpoint-basierte itemsToShow-Werte.
className	string	—	—	CSS-Klasse am Root-Element.

Siehe src/components/carousel/Carousel.model.ts für den vollständigen CarouselProps-Typ.

---

Design-Tokens

Anpassungen über CSS-Custom-Properties auf :root oder einem eingeschränkten Vorfahren-Element.

Token	Standard	Beschreibung
--pk-carousel-overlay-bg	color-mix(in srgb, var(--pk-palette-grey-900) 70%, transparent)	Hintergrund des mobilen Tutorial-Überblendes
--pk-carousel-dot-active-bg	var(--pk-color-fg)	Füllung des aktiven Pagination-Punktes
--pk-carousel-button-padding	var(--pk-space-xs)	Innenabstand der Vor-/Zurück-Schaltflächen
--pk-carousel-dots-mt	0	Oberer Abstand über der Punkt-Indikator-Reihe
--pk-carousel-controls-mt	var(--pk-space-lg)	Oberer Abstand zwischen den Folien und der Steuerzeile (Zurück/Punkte/Vor)

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.2.2	Pausieren, Beenden, Ausblenden (A)	🔍 Manuell prüfen	Animationen oder automatisch rotierende Inhalte, die länger als 5 s laufen, müssen einen Pause-/Stopp-Schalter bieten.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 5 Testdatei(en) · 3 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Carousel in Storybook öffnen

---

Quellcode

src/components/carousel/Carousel.model.ts