Carousel

A compound carousel primitive with drag-to-swipe, keyboard navigation, dot/thumbnail indicators, autoplay, and seamless looping.

carousel slider gallery swipe autoplay loop

Loading preview...

Examples

Practical examples and common states for the same installable component.

Cards

Scrollable carousel for cards and content.

examples/carousel-cards.tsx

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselPrevious,
 6  CarouselNext,
 7  CarouselDots,
 8} from "@/components/wensity/carousel";
 9
10export function CarouselCards() {
11  return (
12    <Carousel loop>
13      <CarouselContent>
14        <CarouselItem>
15          <div className="rounded-2xl border p-5">Revenue: $48.2k</div>
16        </CarouselItem>
17        <CarouselItem>
18          <div className="rounded-2xl border p-5">Active users: 3,204</div>
19        </CarouselItem>
20      </CarouselContent>
21      <div className="mt-3 flex items-center justify-between">
22        <CarouselPrevious />
23        <CarouselDots />
24        <CarouselNext />
25      </div>
26    </Carousel>
27  );
28}

Gallery

Image-focused carousel with large previews.

examples/carousel-gallery.tsx

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselPrevious,
 6  CarouselNext,
 7} from "@/components/wensity/carousel";
 8
 9export function CarouselGallery() {
10  return (
11    <Carousel loop>
12      <CarouselContent>
13        <CarouselItem>
14          <img src="/photo-1.jpg" alt="" className="h-80 w-full rounded-2xl object-cover" />
15        </CarouselItem>
16        <CarouselItem>
17          <img src="/photo-2.jpg" alt="" className="h-80 w-full rounded-2xl object-cover" />
18        </CarouselItem>
19      </CarouselContent>
20      <CarouselPrevious className="absolute left-3 top-1/2 -translate-y-1/2" />
21      <CarouselNext className="absolute right-3 top-1/2 -translate-y-1/2" />
22    </Carousel>
23  );
24}

Vertical

Moves through content with vertical drag, controls, and keyboard navigation.

examples/carousel-vertical.tsx

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselPrevious,
 6  CarouselNext,
 7} from "@/components/wensity/carousel";
 8
 9export function CarouselVertical() {
10  return (
11    <Carousel loop orientation="vertical">
12      <CarouselContent className="h-56">
13        <CarouselItem>
14          <div className="h-full rounded-2xl border p-5">Refine onboarding flow</div>
15        </CarouselItem>
16        <CarouselItem>
17          <div className="h-full rounded-2xl border p-5">Review empty states</div>
18        </CarouselItem>
19      </CarouselContent>
20      <div className="absolute inset-y-3 right-3 flex flex-col justify-between">
21        <CarouselPrevious />
22        <CarouselNext />
23      </div>
24    </Carousel>
25  );
26}

Thumbnails

Carousel with selectable thumbnail navigation.

examples/carousel-thumbnails.tsx

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselThumbnails,
 6} from "@/components/wensity/carousel";
 7
 8export function CarouselThumbnailsDemo() {
 9  return (
10    <Carousel loop>
11      <CarouselContent>
12        <CarouselItem>
13          <img src="/photo-1.jpg" alt="" className="h-56 w-full rounded-2xl object-cover" />
14        </CarouselItem>
15        <CarouselItem>
16          <img src="/photo-2.jpg" alt="" className="h-56 w-full rounded-2xl object-cover" />
17        </CarouselItem>
18      </CarouselContent>
19      <CarouselThumbnails className="mt-3">
20        <img src="/photo-1.jpg" alt="" className="h-14 w-20 object-cover" />
21        <img src="/photo-2.jpg" alt="" className="h-14 w-20 object-cover" />
22      </CarouselThumbnails>
23    </Carousel>
24  );
25}

Autoplay

Automatically advances through carousel items.

examples/carousel-autoplay.tsx

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselDots,
 6} from "@/components/wensity/carousel";
 7
 8export function CarouselAutoplay() {
 9  return (
10    <Carousel loop autoplay autoplayInterval={2800}>
11      <CarouselContent>
12        <CarouselItem>
13          <div className="rounded-2xl border p-5">Design review</div>
14        </CarouselItem>
15        <CarouselItem>
16          <div className="rounded-2xl border p-5">Team sync</div>
17        </CarouselItem>
18      </CarouselContent>
19      <div className="mt-3 flex items-center justify-center">
20        <CarouselDots />
21      </div>
22    </Carousel>
23  );
24}

Infinite

Seamlessly loops content without visible ending.

examples/carousel-infinite.tsx

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselPrevious,
 6  CarouselNext,
 7  CarouselDots,
 8} from "@/components/wensity/carousel";
 9
10export function CarouselInfinite() {
11  return (
12    <Carousel loop>
13      <CarouselContent>
14        <CarouselItem>
15          <div className="rounded-2xl border p-5">One</div>
16        </CarouselItem>
17        <CarouselItem>
18          <div className="rounded-2xl border p-5">Two</div>
19        </CarouselItem>
20        <CarouselItem>
21          <div className="rounded-2xl border p-5">Three</div>
22        </CarouselItem>
23      </CarouselContent>
24      <div className="mt-3 flex items-center justify-between">
25        <CarouselPrevious />
26        <CarouselDots />
27        <CarouselNext />
28      </div>
29    </Carousel>
30  );
31}