Carousel

Image or card slider carousel.

01Overview

02Motion

03Compose

Contract

Overview

Machine-readable contract from Component Spec.

component: carouselexport: Carouselversion: 1attributes: data-refineui=carousel

Anatomy

Part	data-refineui
root	carousel
controls	carousel-controls
indicator	carousel-indicator
indicator_hits	carousel-indicator-hits
indicator_thumb	carousel-indicator-thumb
indicators	carousel-indicators
item	carousel-item
nav	carousel-nav
track	carousel-track
viewport	carousel-viewport

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role	Required attributes
carousel	div	—	—
carousel-item	div	group	—
carousel-indicator	button	tab	aria-selected: required=true, type: boolean

Keyboard

Key	Action	Native
ArrowRight	next-trigger	—
ArrowLeft	previous-trigger	—
Home	first-trigger	—
End	last-trigger	—

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Installation

npm install @refineui/react @refineui/tokens

Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselControls,
  CarouselPrevious,
  CarouselNext,
  CarouselIndicators
} from "@refineui/react";

<Carousel>
  <CarouselContent>
    <CarouselItem>
      <img src="/slide1.jpg" alt="Slide 1" />
    </CarouselItem>
    <CarouselItem>
      <img src="/slide2.jpg" alt="Slide 2" />
    </CarouselItem>
    <CarouselItem>
      <img src="/slide3.jpg" alt="Slide 3" />
    </CarouselItem>
  </CarouselContent>
  <CarouselControls>
    <CarouselPrevious />
    <CarouselNext />
  </CarouselControls>
  <CarouselIndicators />
</Carousel>

<Carousel
  index={currentIndex}
  onIndexChange={setCurrentIndex}
  loop
/>

API Reference

Carousel

Prop	Default	Type	Description
index	—	number	Controlled slide index (0-based).
defaultIndex	0	number	Uncontrolled initial index.
onIndexChange	—	(index: number) => void	Event handler when slide changes.
loop	false	boolean	Wrap from last to first / first to last.