Carousel

A carousel with motion and swipe built using Embla.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/carousel.json

Usage

import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const slides = [1, 2, 3, 4, 5];

<Carousel className="w-full max-w-40">
  <CarouselContent>
    {slides.map((slide) => (
      <CarouselItem key={slide}>
        <Card>
          <CardContent className="flex aspect-square items-center justify-center p-3">
            <span className="font-medium text-2xl">{slide}</span>
          </CardContent>
        </Card>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>