Ark Logo
Reat
Components
Carousel

Carousel

A slideshow component that cycles through elements.

Anatomy

To set up the carousel correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Carousel component in your project. Let's take a look at the most basic example:

To create a controlled Carousel component, you can manage the state of the carousel using the index prop and update it when the onIndexChange event handler is called:

You can customize the Carousel component by setting various props. Here's an example of a customized Carousel:

API Reference

Accessibility

Complies with the Carousel WAI-ARIA design pattern.