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

npm install keen-slider

import Carousel from '@/components/ui/carousel/Carousel.astro';
import CarouselContent from '@/components/ui/carousel/CarouselContent.astro';
import CarouselItem from '@/components/ui/carousel/CarouselItem.astro';
import CarouselPrevious from '@/components/ui/carousel/CarouselPrevious.astro';
import CarouselNext from '@/components/ui/carousel/CarouselNext.astro';
import CarouselDots from '@/components/ui/carousel/CarouselDots.astro';

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

Usage

import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
CarouselDots,
} from "@/components/ui/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)