Carousel
Slideshow for images, testimonials, or promo cards — arrow and dot navigation, keyboard support, looping, and optional autoplay.
API
All inputs and configuration options for zyra-carousel.
| Prop | Type | Default | Description |
|---|---|---|---|
loop | boolean | true | Whether prev/next wrap around at the ends |
autoplay | boolean | false | Automatically advances to the next slide on a timer |
autoplayInterval | number | 5000 | Milliseconds between automatic slide advances |
showArrows | boolean | true | Shows the prev/next arrow buttons |
showDots | boolean | true | Shows the dot navigation |
indexChange (output) | number | - | Emits the active slide index whenever it changes |
Tokens
CSS custom properties zyra-carousel reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-carousel-bg | var(--zyra-color-surface-inset) | Fill color of the carousel viewport. |
Text--zyra-color-carousel-text | var(--zyra-color-foreground) | Base text color inside the viewport. |
Dots track--zyra-color-carousel-border | var(--zyra-color-border-color) | Fill color of an inactive dot. |
Arrow background--zyra-color-surface | var(--zyra-color-card-bg) | Fill color of the previous/next arrow buttons. |
Arrow text--zyra-color-foreground | var(--zyra-color-text) | Icon color of the arrow buttons. |
Arrow border--zyra-color-border-color | var(--zyra-color-border) | Border color of the arrow buttons. |
Active accent--zyra-color-primary | var(--zyra-color-accent) | Fill color of the active dot, arrow hover state, and focus outlines. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Root has role="region" with aria-roledescription="carousel"
- Each slide has role="group" with aria-roledescription="slide"
- Arrow Left/Right keys navigate; dots use role="tab" with aria-selected reflecting the active slide
- Autoplay pauses on mouseenter and resumes on mouseleave so it never fights a reading user