Carousel

A slideshow component for cycling through elements.

Basic Carousel

Slide 1

First slide content

Slide 2

Second slide content

Slide 3

Third slide content

Slide 4

Fourth slide content

Image Carousel

Slide 1
Slide 2
Slide 3

Auto-Playing Carousel

Slide 1

First slide content

Slide 2

Second slide content

Slide 3

Third slide content

Slide 4

Fourth slide content

Without Indicators

Slide 1

First slide content

Slide 2

Second slide content

Slide 3

Third slide content

Slide 4

Fourth slide content

Without Navigation Arrows

Slide 1

First slide content

Slide 2

Second slide content

Slide 3

Third slide content

Slide 4

Fourth slide content

Non-Infinite Carousel

Slide 1

First slide content

Slide 2

Second slide content

Slide 3

Third slide content

Slide 4

Fourth slide content

Usage

import { Carousel } from "@/components/carousel"

export default function MyComponent() {
  const slides = [
    <div key="slide1" className="h-64 bg-primary/10 flex items-center justify-center">
      <h3 className="text-xl font-bold">Slide 1</h3>
    </div>,
    <div key="slide2" className="h-64 bg-blue-100 flex items-center justify-center">
      <h3 className="text-xl font-bold">Slide 2</h3>
    </div>,
    <div key="slide3" className="h-64 bg-green-100 flex items-center justify-center">
      <h3 className="text-xl font-bold">Slide 3</h3>
    </div>,
  ]
  
  return (
    <Carousel 
      items={slides} 
      autoPlay={true}
      interval={5000}
      showArrows={true}
      showIndicators={true}
    />
  )
}

Props

Name
Type
Default
Description
items
ReactNode[]
required
Array of React elements to display as slides.
autoPlay
boolean
false
Whether to automatically cycle through slides.
interval
number
5000
Time in milliseconds between slide transitions.
showArrows
boolean
true
Whether to show navigation arrows.
showIndicators
boolean
true
Whether to show slide indicator dots.
infinite
boolean
true
Whether to loop back to the first slide after the last.