A carousel component with scroll controls and pagination.
The Carousel is a copy-paste component in the UI Elements collection of Lightswind UI. Built with TypeScript, Tailwind CSS, and Framer Motion for clean developer experience and rapid UI building.
Add this import to your component file
1import {2 Carousel,3 CarouselContent,4 CarouselItem,5 CarouselPrevious,6 CarouselNext7} from "@/components/lightswind/carousel"
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1<Carousel>2 <CarouselContent>3 {items.map((item) => (4 <CarouselItem key={item.id}>5 <div className="p-1">6 <Card>7 <CardContent className="flex aspect-square items-center justify-center p-6">8 <span className="text-4xl font-semibold">{item.title}</span>9 </CardContent>10 </Card>11 </div>12 </CarouselItem>13 ))}14 </CarouselContent>15 <CarouselPrevious />16 <CarouselNext />17</Carousel>
Different visual and behavioral variants of the component
A simple horizontal carousel displaying indexed slides.
A product byＭＵＨＩＬＡＮ and Team❤️.
