Component

Carousel

Horizontally sliding content container with prev/next navigation and optional auto-play.

Usage

Use carousels for a series of related visual items like testimonials or feature highlights. Keep to 3–5 slides.

Playground

Preview
Slide 1
Slide 2
Slide 3

Configure

No

Wrap from last slide back to first

No

Automatically advance every 3 seconds

Code

<Carousel className="w-full max-w-sm">
  <CarouselContent>
    <CarouselItem>
      <div className="bg-muted rounded-lg h-40 flex items-center justify-center">
        Slide 1
      </div>
    </CarouselItem>
    <CarouselItem>
      <div className="bg-muted rounded-lg h-40 flex items-center justify-center">
        Slide 2
      </div>
    </CarouselItem>
    <CarouselItem>
      <div className="bg-muted rounded-lg h-40 flex items-center justify-center">
        Slide 3
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrev />
  <CarouselNext />
</Carousel>

Do

  • Show navigation arrows so users can control the carousel
  • Keep slide count to 3–5 for best usability

Don't

  • Don't autoplay carousels that contain important information
  • Don't use carousels for primary navigation