Carousel

A slideshow of items, with keyboard and touch gesture support, built on Embla Carousel.

"use client";

import { Card } from "@smartacteam/ambient-web/card";
import { Carousel } from "@smartacteam/ambient-web/carousel";

export function CarouselDemo() {
  return (
    <Carousel.Root className="w-full max-w-xs">
      <Carousel.Content>
        {Array.from({ length: 5 }).map((_, index) => (
          <Carousel.Item key={index}>
            <Card.Root>
              <Card.Content className="flex aspect-square items-center justify-center p-6">
                <span className="text-4xl font-semibold">{index + 1}</span>
              </Card.Content>
            </Card.Root>
          </Carousel.Item>
        ))}
      </Carousel.Content>
      <Carousel.Previous />
      <Carousel.Next />
    </Carousel.Root>
  );
}

Usage

import { Carousel } from "@smartacteam/ambient-web/carousel";

<Carousel.Root>
  <Carousel.Content>
    <Carousel.Item>Slide 1</Carousel.Item>
    <Carousel.Item>Slide 2</Carousel.Item>
    <Carousel.Item>Slide 3</Carousel.Item>
  </Carousel.Content>
  <Carousel.Previous />
  <Carousel.Next />
</Carousel.Root>

API Reference

Prop	Type	Default
`orientation`	`enum`	`"horizontal"`
`opts`	Embla Carousel options	—
`setApi`	`(api: CarouselApi) => void`	—

useCarousel() exposes the active Embla api, orientation, scrollPrev/scrollNext, and canScrollPrev/canScrollNext to any descendant of Carousel.Root.