Carousel
Bilder-Carousel auf scroll-snap-Basis: ohne JavaScript horizontal wischbar, der Controller ergänzt Pfeile, Punkte und Tastatur — kein Autoplay (bewusst)
Beispiele
Drei Folien mit Untertiteln
Einzelbild (keine Pfeile/Punkte)
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| slides * | array | — | Folien |
| ratio | string: 16:9 | 4:3 | 1:1 | "16:9" | Seitenverhältnis |
* Pflicht-Prop
Events & Slots
Events:
⚡ change — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--carousel-arrow-background | var(--color-surface-default) |
--carousel-dot | var(--color-border-strong) |
--carousel-dot-active | var(--color-action-primary) |
Genutzte Design-Tokens
border.hairlinecolor.action.primarycolor.border.strongcolor.border.subtlecolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedelevation.raisedfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultradius.fullradius.surfacesize.1size.10size.2size.3text.sm