<!-- Auto-generated by `velinstyle docs generate`. Do not edit. Source: components/velin-carousel.js -->

# <velin-carousel>

Source: `components/velin-carousel.js`

## Minimal working example
Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed):

```html
<velin-carousel style="max-width:36rem;">
              <div style="background:#e3f2fd;padding:4rem 2rem;text-align:center;border-radius:0.5rem;">Slide 1</div>
              <div style="background:#fce4ec;padding:4rem 2rem;text-align:center;border-radius:0.5rem;">Slide 2</div>
              <div style="background:#e8f5e9;padding:4rem 2rem;text-align:center;border-radius:0.5rem;">Slide 3</div>
            </velin-carousel>
```

_Example derived from human component docs (`exampleSource: human-doc`; fail-closed extract — not a second SoT)._

## Accessibility
WCAG contract status: **pass** (framework target: AAA).

- **Roles:** `group`, `button`
- **Keyboard:** Arrows, Home, End, dots
- **Reduced motion:** honored

## Attributes
| Attribute | Notes |
| --- | --- |
| `autoplay` | Observed — triggers `attributeChangedCallback` when changed |
| `interval` | Observed — triggers `attributeChangedCallback` when changed |
## Events
- `velin-slide-change` (bubbles)
## CSS parts
- `controls`
- `indicators`
- `next`
- `prev`
- `track`
## Slots
- `(default)`
## Public API
| Kind | Name |
| --- | --- |
| Method | `goTo()` |
| Method | `next()` |
| Method | `prev()` |
## Related resources
- Generated API docs (canonical): [`velin-carousel.md`](./velin-carousel.md)
- Generated index: [README.md](./README.md)
- CLI API: `npx velinstyle wc api velin-carousel`
- Human docs EN (tutorial): `docs/components/carousel.html`
- Human docs DE (tutorial, lang-map): `docs/components/karussell.html`
- Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`
