Carousel

01Overview

02Motion

03Compose

󰯠󰯮

계약

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

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

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 레퍼런스

Carousel

Prop	Default	Type	Description
index	—	number	제어형 슬라이드 인덱스(0부터).
defaultIndex	0	number	비제어형 초기 인덱스.
onIndexChange	—	(index: number) => void	슬라이드 변경 시 이벤트 핸들러.
loop	false	boolean	마지막↔처음으로 순환합니다.

CarouselContent

슬라이드 컨테이너.

CarouselItem

개별 슬라이드.

CarouselControls

내비게이션 버튼 컨테이너.

CarouselPrevious

이전 슬라이드 버튼.

CarouselNext

다음 슬라이드 버튼.

CarouselIndicators

슬라이드 점 인디케이터.