1. Docs
2. Components
3. Carousel

Carousel

The <velin-carousel> Web Component provides a touch-friendly slideshow with prev/next controls, dot indicators, optional autoplay with a pause control, keyboard navigation, and WCAG 2.2–aligned ARIA (0.7.0).

Basic Example

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

Keyboard navigation

When focus is inside the carousel, arrow keys move between slides.

Pause control

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.

Accessibility

• 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 Variables

JavaScript API

Attributes

Methods

Events