Carousel

zyra-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.

PropTypeDefaultDescription
loopbooleantrueWhether prev/next wrap around at the ends
autoplaybooleanfalseAutomatically advances to the next slide on a timer
autoplayIntervalnumber5000Milliseconds between automatic slide advances
showArrowsbooleantrueShows the prev/next arrow buttons
showDotsbooleantrueShows the dot navigation
indexChange (output)number-Emits the active slide index whenever it changes

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