Carousel

Usage

import { Carousel } from "@chakra-ui/react"

<Carousel.Root>
  <Carousel.ItemGroup>
    <Carousel.Item />
  </Carousel.ItemGroup>
  <Carousel.Control>
    <Carousel.AutoplayTrigger>
      <Carousel.AutoplayIndicator />
    </Carousel.AutoplayTrigger>
    <Carousel.PrevTrigger />
    <Carousel.Indicators />
    <Carousel.NextTrigger />
    <Carousel.ProgressText />
  </Carousel.Control>
</Carousel.Root>

Shortcuts

The Carousel component also provides convenient shortcuts for common patterns.

Carousel.Indicators

The Carousel.Indicators shortcut renders a full set of indicators automatically based on the number of slides.

<Carousel.IndicatorGroup>
  {Array.from({ length: items.length }, (_, index) => (
    <Carousel.Indicator key={index} index={index} />
  ))}
</Carousel.IndicatorGroup>

This might be more concise if you don't need to customize each indicator:

<Carousel.Indicators />

Examples

Controlled

Use the page and onPageChange props to programatically control the active carousel page.

Store

Alternatively, use the useCarousel hook to create a carousel store and pass it to the Carousel.RootProvider component for full programmatic control.

Arrows

Use the Carousel.PrevTrigger and Carousel.NextTrigger components to create arrows that navigate between slides.

Indicators

Use the Carousel.Indicators component to render visual indicators that help users track the progress of the carousel and jump to specific slides.

Thumbnail Indicators

Here's an example that uses an image thumbnail as a custom indicator.

Spacing

Use the spacing prop to control the spacing between slides.

Variable Size

Use the autoSize prop to allow variable width/height slide items.

Vertical

Use the orientation prop to vertical to transform your carousel into a vertical slider.

Mouse Drag

Use the allowMouseDrag prop to enable mouse dragging on the carousel.

Autoplay

Pass the autoplay prop to the Carousel.Root component to make the carousel automatically move between slides.

Lightbox

Compose the Carousel component with the Dialog component to create a lightbox.

Image Carousel

Here's an example that shows how to create an image carousel for a product showcase.

Property Card

Here's an example that shows how to compose the Carousel component with other components to create a property card carousel.

Props

Root

ItemGroup

Item

Control

Explorer

Explore the Carousel component parts interactively. Click on parts in the sidebar to highlight them in the preview.