Carousel

organisms

Responsive event carousel for homepage. Replaces Slick carousel. CSS scroll-snap based.

ARIA Role: region

Demo

Demo for Carousel (organisms)

Responsive event carousel for homepage. Replaces Slick carousel. CSS scroll-snap based.

Props

Prop	Type	Required	Default	Description
`items`	`CarouselItem[]`	Yes	`—`	Carousel items
`itemsPerView`	`number`	No	`3`	Items visible at once
`autoplay`	`boolean`	No	`false`	Enable autoplay
`autoplayInterval`	`number`	No	`5000`	Autoplay interval (ms)
`onSlideChange`	`(index: number) => void`	No	`—`	Slide change handler

TypeScript Interface

interface CarouselProps {
  items: CarouselItem[];
  itemsPerView?: number;
  autoplay?: boolean;
  autoplayInterval?: number;
  onSlideChange?: (index: number) => void;
}

Assertions (NASA Rule 5)

[aria]Container role='region' with aria-roledescription='carousel'(WAI-ARIA APG)
[aria]Slides use aria-label or aria-labelledby(WCAG 1.3.1)
[keyboard]Arrow keys navigate, Space toggles auto-play, Tab into controls(WCAG 2.1.1)
[validation]Pause auto-play on hover and focus(WCAG 2.2.2)

Usage

Import

import { Carousel } from '@epasslive/design-system'

Basic

<Carousel />

With Variants

<Carousel variant="primary" size="md" />