Design Docs

RollingBannerSwiper 기반 자동 슬라이드 배너 컴포넌트입니다. 여러 배너 아이템을 순환하며, 터치 스와이프와 접근성(prefers-reduced-motion)을 지원합니다.

Examples

기본 사용법여러 Banner.Normal 아이템을 넣으면 3초 간격으로 자동 슬라이드됩니다.

첫 번째 배너배너 설명 텍스트입니다

1/3

두 번째 배너자동으로 슬라이드됩니다

2/3

세 번째 배너터치 스와이프도 가능합니다

3/3

단일 아이템아이템이 1개일 때 Swiper 없이 렌더링되며, 우측에 화살표 아이콘이 표시됩니다.

단일 배너 아이템화살표 아이콘이 표시됩니다

hideArrowOnSingle단일 아이템에서 화살표 아이콘을 숨깁니다.

단일 배너 아이템화살표 아이콘이 표시됩니다

autoplayDelay 조절autoplayDelay={1000}으로 1초 간격 빠른 슬라이드를 설정합니다.

첫 번째 배너배너 설명 텍스트입니다

1/3

두 번째 배너자동으로 슬라이드됩니다

2/3

세 번째 배너터치 스와이프도 가능합니다

3/3

코드 예시Banner.Normal과 함께 사용하는 기본 패턴입니다.

const bannerItems = [<Banner.Normal key="1" icon={<Icon />} title="제목" description="설명" onClick={handler} />,<Banner.Normal key="2" icon={<Icon />} title="제목" description="설명" onClick={handler} />,];<RollingBanner items={bannerItems} autoplayDelay={2000} />

Props

Name	Type	Default	Required	Description
items	string	[]	Yes	배너에 표시할 ReactNode 배열
autoplayDelay	number	3000	-	자동 슬라이드 간격 (ms)
hideArrowOnSingle	boolean	false	-	단일 아이템일 때 화살표 아이콘 숨김
renderIndicator	string	undefined	-	커스텀 인디케이터 렌더 함수 ({ currentIndex, totalCount, progress? }) => ReactNode