Carousel

A flexible and easy-to-use carousel with customizable navigation and indicators.

Carousel

A flexible and easy-to-use carousel with customizable navigation and indicators.

Examples

Carousel basic

Carousel with custom sizes

We use basis-1/3 to set the width of each carousel item to one-third of the container.

Carousel with custom sizes and spacing

We use -ml-4 on CarouselContent and pl-4 on CarouselItem to add spacing between carousel items.

Carousel with custom indicators

We can use index and onIndexChange to create custom indicators for the carousel.

Installation

npx shadcn@latest add "https://components.dylanwlim.com/c/carousel.json"

Component API

Carousel

Prop	Type	Default	Description
`children`	`ReactNode`		The content elements of the carousel.
`className`	`string`		Optional CSS class for styling the carousel container.
`initialIndex`	`number`	`0`	Initial index of the active carousel item.
`index`	`number`		Controlled index of the active carousel item.
`onIndexChange`	`(newIndex: number) => void`		Callback function when the active index changes.
`disableDrag`	`boolean`	`false`	Whether dragging is disabled.

CarouselNavigation

Prop	Type	Default	Description
`className`	`string`		Optional CSS class for styling the navigation container.
`classNameButton`	`string`		Optional CSS class for styling the navigation buttons.
`alwaysShow`	`boolean`	`false`	Whether navigation buttons are always visible.

CarouselIndicator

Prop	Type	Default	Description
`className`	`string`		Optional CSS class for styling the indicator container.
`classNameButton`	`string`		Optional CSS class for styling the indicator buttons.

CarouselContent

Prop	Type	Description
`children`	`ReactNode`	The sliding elements or items of the carousel.
`className`	`string`	Optional CSS class for additional styling.
`transition`	`Transition`	Optional motion transition for animating slides.

CarouselItem

Prop	Type	Default	Description
`children`	`ReactNode`		The individual content item within the carousel.
`className`	`string`		Optional CSS class for styling the carousel item.

useCarousel

Return	Type	Description
`index`	`number`	The current index of the active carousel item.
`setIndex`	`(newIndex: number) => void`	Function to update the index to show a different carousel item.
`itemsCount`	`number`	Total number of items in the carousel.
`setItemsCount`	`(newItemsCount: number) => void`	Function to set the number of items in the carousel.

This hook provides context values related to the carousel's state, allowing components within the carousel to adjust based on the active item and total items.

Border Trail Cursor

On This Page

Carousel Examples Carousel basic Carousel with custom sizes Carousel with custom sizes and spacing Carousel with custom indicators Installation Component API Carousel CarouselNavigation CarouselIndicator CarouselContent CarouselItem useCarousel

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.