Karussell 1.2.0

The <velin-carousel> Web Component provides a touch-friendly slideshow with prev/next controls, dot indicators, optional autoplay with a pause control, and keyboard navigation. English: Carousel

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Design Intelligence (Plan / Review / Agent-Meta) ist separat und, wo angegeben, Beta / Grundlage.

Wann verwenden

Rotierende Hero-Medien, Produktgalerien oder Testimonials, bei denen jeweils eine Folie primaer ist.
Wenn du integrierte Zurueck/Weiter-Steuerung, Punkte, Swipe und optionales Autoplay mit expliziter Pausensteuerung brauchst.

Wann nicht verwenden

Inhalte, die zum Verstaendnis alle sichtbar sein muessen: verwende stattdessen ein statisches Grid oder eine Liste.
Fullscreen-Medien-Browsing: verwende Lightbox.
Erfinde keine undokumentierten Slide-Attribute; uebergib einfache Kindelemente als Slides.

Einfaches Beispiel

Folie 1

Folie 2

Folie 3

<velin-carousel>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</velin-carousel>

Autoplay

Add the autoplay attribute. Set interval in milliseconds with interval (default 5000). A Pause / Play button appears in the indicator row (see pause control).

<velin-carousel autoplay interval="3000">
  <div>Slide 1</div>
  <div>Slide 2</div>
</velin-carousel>

Tastatur navigation

Wenn der Fokus im Karussell liegt, wechseln Pfeiltasten zwischen Folien.

Taste	Aktion
`Arrow Links` / `Arrow Rechts`	Vorherige / naechste Folie
`Startseite` / `End`	Erste / letzte Folie

Pausensteuerung

With autoplay, a pause button is added next to the dot indicators. It toggles aria-pressed, updates its label between “Pause automatic slide show” and “Resume automatic slide show”, and stops the timer until pressed again. Autoplay also pauses while the carousel is hovered or contains focus.

Barrierefreiheit

Host has role="region" and aria-roledescription="carousel"; the slide track is a role="group".
Each slide gets aria-roledescription="slide" and aria-label="Slide N of M"; inactive slides use aria-hidden="true" and inert.
Prev/next controls use descriptive aria-labels and meet the 2.75×2.75 rem minimum target size (WCAG 2.5.8).
Dot indicators are <button> elements with aria-label="Go to slide N" and aria-current on the active slide.
Autoplay includes an explicit pause/play control (WCAG 2.2.2) and pauses on hover or when focus enters the carousel.
Track transitions respect prefers-reduced-motion: reduce; touch swipe threshold is 50 px.

CSS-Variablen

Variable	Beschreibung
`--velin-color-surface-bright`	Hintergrund der Steuerbuttons
`--velin-color-border`	Rahmen der Steuerbuttons
`--velin-color-primary`	Aktiver Punktindikator
`--velin-shadow-md`	Schatten der Steuerbuttons
`--velin-color-focus`	Fokus-Ring-Farbe

API

Attribut

Attribut	Typ	Beschreibung
`autoplay`	Boolesch	Observed — enable auto-advancing slides
`interval`	Zahl	Observed — milliseconds between slides (default 5000)

Methodeen & events

API	Beschreibung
`prev()` / `next()`	Move one slide
`goTo(index)`	Zero-based slide index
`velin-slide-change`	Bubbles with `detail: { index }`

Parts

track, controls, prev, next, indicators. Standard slot = slides.

Best practices & pitfalls

Prefer autoplay only when a pause control is acceptable; the component adds one when autoplay is set.
Keep slide content self-contained; inactive slides are inert / aria-hidden.
Erfinde keine Bootstrap-Karussellklassen; dies ist nur die Web-Component-API.