Carousel

<Carousel class="w-full max-w-md">
  <CarouselContent>
    <CarouselItem>
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-4xl font-semibold">1</span>
        </CardContent>
      </Card>
    </CarouselItem>
    <CarouselItem>
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-4xl font-semibold">2</span>
        </CardContent>
      </Card>
    </CarouselItem>
    <CarouselItem>
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-4xl font-semibold">3</span>
        </CardContent>
      </Card>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Installation

npx bearnie add carousel

External dependency: This component requires Keen Slider, a lightweight touch slider library.

Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  CarouselDots,
} from "@/components/bearnie/carousel"

<Carousel>
  <CarouselContent>
    <CarouselItem>Slide 1</CarouselItem>
    <CarouselItem>Slide 2</CarouselItem>
    <CarouselItem>Slide 3</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Examples

With dots

Slide 1

Slide 2

Slide 3

<Carousel class="w-full max-w-md">
  <CarouselContent>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-muted">
        <span class="text-2xl font-semibold">Slide 1</span>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-muted">
        <span class="text-2xl font-semibold">Slide 2</span>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-muted">
        <span class="text-2xl font-semibold">Slide 3</span>
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
  <CarouselDots count={3} />
</Carousel>

Loop

<Carousel loop class="w-full max-w-md">
  <CarouselContent>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-primary text-primary-foreground">
        <span class="text-2xl font-semibold">1</span>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-primary text-primary-foreground">
        <span class="text-2xl font-semibold">2</span>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-primary text-primary-foreground">
        <span class="text-2xl font-semibold">3</span>
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Autoplay

<Carousel autoplay autoplayDelay={3000} loop class="w-full max-w-md">
  <CarouselContent>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-rose-200 text-rose-900">
        <span class="text-2xl font-semibold">Auto 1</span>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-sky-200 text-sky-900">
        <span class="text-2xl font-semibold">Auto 2</span>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-lg bg-amber-200 text-amber-900">
        <span class="text-2xl font-semibold">Auto 3</span>
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselDots count={3} />
</Carousel>

Multiple slides per view

<Carousel slidesPerView={3} spacing={16} class="w-full max-w-2xl">
  <CarouselContent>
    <CarouselItem>
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-2xl font-semibold">1</span>
        </CardContent>
      </Card>
    </CarouselItem>
    <CarouselItem>
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-2xl font-semibold">2</span>
        </CardContent>
      </Card>
    </CarouselItem>
    <CarouselItem>
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-2xl font-semibold">3</span>
        </CardContent>
      </Card>
    </CarouselItem>
    <CarouselItem>
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-2xl font-semibold">4</span>
        </CardContent>
      </Card>
    </CarouselItem>
    <CarouselItem>
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-2xl font-semibold">5</span>
        </CardContent>
      </Card>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Props

Prop	Type	Default	Description
loop	boolean	false	Enable infinite loop
autoplay	boolean	false	Auto-advance slides
autoplayDelay	number	4000	Delay between slides in ms
pauseOnHover	boolean	true	Pause autoplay on hover
slidesPerView	number \| “auto”	1	Slides visible at once
spacing	number	16	Gap between slides in px
orientation	”horizontal” \| “vertical"	"horizontal”	Slide direction

CarouselDots

Prop	Type	Default	Description
count	number	required	Number of dots to display

Accessibility

Navigation buttons have proper aria-labels
Dots indicate current slide position
Touch and swipe gestures supported
Keyboard navigation supported (arrow keys when focused)