Carousel

Installation

pnpm dlx saastro add carousel

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add carousel --yes

pnpm add tailwind-variants embla-carousel

Usage

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

<Carousel>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Examples

Sizes

Use the basis utility class to set the size of items.

<Carousel class="w-full max-w-sm">
  <CarouselContent>
    <CarouselItem class="basis-1/3">...</CarouselItem>
    <CarouselItem class="basis-1/3">...</CarouselItem>
    <CarouselItem class="basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>

Spacing

Use the pl-* utility on CarouselItem and negative -ml-* on CarouselContent to set spacing.

<Carousel class="w-full max-w-sm">
  <CarouselContent class="-ml-2 md:-ml-4">
    <CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
    <CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
    <CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
  </CarouselContent>
</Carousel>

Orientation

Use the orientation prop to set the orientation of the carousel.

<Carousel orientation="vertical" class="w-full max-w-xs">
  <CarouselContent class="-mt-1 h-[200px]">
    <CarouselItem class="pt-1 md:basis-1/2">...</CarouselItem>
    <CarouselItem class="pt-1 md:basis-1/2">...</CarouselItem>
    <CarouselItem class="pt-1 md:basis-1/2">...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Options

Pass Embla options through the opts prop.

<Carousel opts={{ align: "start", loop: true }}>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>

Plugins

You can use Embla plugins with the initCarousel function.

---
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui-saastro/carousel"
---

<Carousel autoInit={false} id="my-carousel">
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>

<script>
  import { initCarousel } from "@/components/ui-saastro/carousel";
  import Autoplay from "embla-carousel-autoplay";

  const carousel = document.getElementById("my-carousel");
  if (carousel) {
    initCarousel(carousel, {
      plugins: [Autoplay({ delay: 2000 })],
    });
  }
</script>

API Access

Access the Embla API for programmatic control.

<Carousel autoInit={false} id="controlled-carousel">
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>

<script>
  import { initCarousel } from "@/components/ui-saastro/carousel";

  const carousel = document.getElementById("controlled-carousel");
  if (carousel) {
    const manager = initCarousel(carousel, {
      setApi: (api) => {
        api.on("select", () => {
          console.log("Current index:", api.selectedScrollSnap());
        });
      },
    });
  }
</script>

Props

Carousel

CarouselContent

CarouselItem

CarouselPrevious / CarouselNext

Accessibility

• Carousel uses role="region" with aria-roledescription="carousel"
• Items use role="group" with aria-roledescription="slide"
• Navigation buttons have proper aria-label
• Keyboard navigation with arrow keys (Left/Right or Up/Down based on orientation)
• Buttons are automatically disabled when at the start/end

Performance

Este componente Saastro usa vanilla JavaScript + Embla en lugar de React. Prueba el benchmark interactivo para comparar el rendimiento en tiempo real: