A
Aether UI

Carousel

A touch-friendly slider built on Embla Carousel with prev/next navigation and full keyboard accessibility. Supports horizontal and vertical orientations and an optional external API handle.

  • ✓Horizontal and vertical orientations
  • ✓Keyboard accessible
  • ✓Prev/Next button controls
  • ✓Built on embla-carousel-react
1
2
3

import { Carousel }from "@aetherstack/ui"

carousel.tsx
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from "@/components/ui/carousel"

export function CarouselDemo() {
  return (
    <div className="w-full max-w-xs px-10">
      <Carousel>
        <CarouselContent>
          {[1, 2, 3].map((n) => (
            <CarouselItem key={n}>
              <div className="flex h-32 items-center justify-center rounded-lg border bg-muted text-2xl font-bold">
                {n}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Usage

Multi-item per view

Show multiple slides at once using basis classes on CarouselItem.

1
2
3
4
5

Loop mode

Pass opts to Embla to enable infinite loop scrolling.

A
B
C

Props

PropTypeDefaultDescription

Carousel

PropTypeDefaultDescription
optsEmblaOptionsType—Options passed directly to Embla Carousel (e.g. loop, align, skipSnaps).
orientation"horizontal" | "vertical""horizontal"Scroll axis of the carousel.
setApi(api: CarouselApi) => void—Callback to receive the Embla API instance for programmatic control.
pluginsEmblaPluginType[]—Embla plugins array (e.g. Autoplay).

CarouselItem

PropTypeDefaultDescription
classNamestring—Use basis-* classes (e.g. basis-1/3) to show multiple slides per view.

CarouselPrevious / CarouselNext

PropTypeDefaultDescription
variantButtonVariant"outline"Button variant passed to the underlying Button component.
sizeButtonSize"icon"Button size passed to the underlying Button component.

* Required props

Accessibility

  • →The root Carousel element has role='region' and aria-roledescription='carousel'.
  • →Each CarouselItem has role='group' and aria-roledescription='slide'.
  • →CarouselPrevious and CarouselNext contain sr-only text for screen reader announcement.
  • →Arrow key navigation (left/right) is handled via onKeyDownCapture on the root element.