Carousel

A sliding component that showcases multiple pieces of content or images in a rotating or swiping interface.

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Carousel

Usage

import { Carousel, CarouselItem } from "@/components/display-ui/Carousel"

<Carousel size="lg" autoPlay intervalMs={4000} className="mx-auto mt-8">
  <CarouselItem className="bg-white h-64 flex items-center justify-center text-white text-2xl">
    <img
      src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt=""
    />
  </CarouselItem>
  <CarouselItem className="bg-blue-400 h-64 flex items-center justify-center text-white text-2xl">
    <img
      src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt=""
    />
  </CarouselItem>
  <CarouselItem className="bg-green-400 h-64 flex items-center justify-center text-white text-2xl">
    <img
      src="https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt=""
    />
  </CarouselItem>
</Carousel>

API

Carousel Props

For Carousel Component

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Slides to be rendered inside the carousel. Typically composed of CarouselItem components.	-
size	`"sm" \| "md" \| "lg"`	Controls the maximum width of the carousel container.	"md"
autoPlay	`boolean`	Enables automatic slide transitions at a fixed interval.	false
intervalMs	`number`	Time interval in milliseconds between automatic slide transitions when autoPlay is enabled.	3000
className	`string`	Additional CSS classes to customize the carousel container styling.	-

For Carousel Item

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Content of an individual carousel slide.	-
className	`string`	Additional CSS classes to customize the carousel item styling.	-

Examples

Default

With Autoplay and Intervals

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

On this page