캐러셀

캐러셀 (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)

Carousel 컴포넌트는 자주 쓰이는 패턴을 위한 편리한 단축 기능도 제공해요.

Carousel.Indicators

Carousel.Indicators 단축 기능은 슬라이드 수에 따라 전체 인디케이터 세트를 자동으로 렌더링해요.

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

각 인디케이터를 커스터마이즈할 필요가 없다면, 이렇게 더 간결하게 쓸 수도 있어요:

<Carousel.Indicators />

예제 (Examples)

제어 (Controlled)

page와 onPageChange prop을 사용해 활성 캐러셀 페이지를 프로그래밍 방식으로 제어할 수 있어요.