Carousel

Ready

Part of Data Display collection

Interactive Preview

Image carousel with auto-play, navigation arrows, and dot indicators

Mountain Adventure

Explore the breathtaking peaks and valleys

Beach Paradise

Relax on pristine shores under the sun

Forest Retreat

Find peace in the heart of nature

Custom Content

Carousel with custom React components instead of images

Welcome

Slide with custom content

Features

Auto-play, navigation, and more

Get Started

Easy to integrate and customize

Features

Image slides with title and description overlays
Custom React content for any slide
Auto-play with configurable interval
Navigation arrows (show on hover)
Dot indicators for slide position
Smooth transitions with automatic looping
Pause auto-play on hover

Installation

Import the Carousel component and CarouselItem type:

import { Carousel, type CarouselItem } from '@/components/ui/carousel'

Usage Examples

Basic Image Carousel

const slides: CarouselItem[] = [
  {
    image: '/image1.jpg',
    title: 'Slide 1',
    description: 'First slide description'
  },
  {
    image: '/image2.jpg',
    title: 'Slide 2',
    description: 'Second slide description'
  }
]

<Carousel items={slides} />

With Auto-Play

<Carousel
  items={slides}
  autoPlay
  autoPlayInterval={3000}
/>

Custom Content

const slides: CarouselItem[] = [
  {
    content: <div>Custom React content here</div>
  },
  {
    content: <MyComponent />
  }
]

<Carousel items={slides} />

Without Controls

<Carousel
  items={slides}
  showArrows={false}
  showDots={false}
/>

API Reference

Carousel Props

Prop	Type	Default	Description
items	CarouselItem[]	required	Array of slides to display
autoPlay	boolean	false	Enable automatic slide transitions
autoPlayInterval	number	5000	Interval in milliseconds between slides
showDots	boolean	true	Show dot indicators
showArrows	boolean	true	Show navigation arrows
className	string	-	Additional CSS classes

CarouselItem Type

Property	Type	Required	Description
image	string	No	Image URL for the slide
title	string	No	Title overlay text
description	string	No	Description overlay text
content	React.ReactNode	No	Custom React content (alternative to image)