Carousel

여러가지 이미지를 한 공간에서 보여줄 때 사용합니다.

TypescriptWAI-ARIA

캐러셀을 구성하는 요소를 설명합니다.

Spacing Control
Control은 Contents area를 기준으로 32px 간격을 두고 위치시킵니다.
Spacing Indicator
Indicator는 Contents area를 기준으로 24px 간격을 두고 위치시킵니다.

import { Carousel } from '@goorm-dev/vapor-components';

name	description	default
activeIndex	현재 선택된 슬라이드의 인덱스를 설정합니다. number	0
next	다음 슬라이드 이동하는 함수를 설정합니다. function
prev	이전 슬라이드로 이동하는 함수를 설정합니다. function
keyboard	키보드로 슬라이드를 이동할 수 있도록 설정합니다. boolean	true
pause	'hover'로 설정할 경우, mouseenter 이벤트 발생 시 캐러셀 자동 사이클이 멈추고, mouseleave 이벤트 발생 시 캐러셀 자동 사이클이 다시 돌아갑니다. false로 설정될 경우, 캐러셀에 mouseenter 이벤트가 발생하더라도, 캐러셀이 멈추지 않습니다. hoverfalse	hover
ride	캐러셀이 자동으로 넘어가는 시간 간격 (default: 5000 , 5초) boolean	false
interval	캐러셀이 자동으로 넘어가는 시간 간격 (default: 5000 , 5초) numberstringboolean	5000
mouseEnter	마우스가 올라갔을 때 실행할 함수를 정의합니다. function
mouseLeave	마우스가 내려갔을 때 실행할 함수를 정의합니다. function
slide	슬라이드 애니메이션이 적용될지 여부 boolean	true
cssModule	cssModule을 설정합니다. CSSModule
enableTouch	터치 이벤트를 활성화합니다. boolean	true
isVertical	세로로 슬라이드를 설정합니다. boolean	false

name	description	default
tag	CarouselItem에 적용할 태그를 정의합니다 string	div
in	컴포넌트 표시; 진입 또는 종료 상태를 트리거합니다.(Show the component; triggers the enter or exit states.) boolean	false
altText	이미지의 대체 텍스트를 설정합니다. string
slide	슬라이드 애니메이션을 적용합니다. boolean	true

name	description	default
prevHandler	이전 슬라이드로 이동하는 함수를 설정합니다. function
nextHandler	다음 슬라이드로 이동하는 함수를 설정합니다. function
isVertical	세로로 슬라이드를 설정합니다. boolean	false
size	캐러셀 컨트롤의 크기를 설정합니다. string	lg
isOut	컨트롤 버튼을 밖으로 보일지 안으로 보일지 설정합니다. boolean	false
isClose	컨트롤러가 붙어서 위치할지 여부 boolean	false
closeAlign	컨트롤러가 붙어서 위치한다면 정렬 leftcenterright	right
prevClassName	이전 버튼에 추가되는 클래스명을 설정합니다. string
nextClassName	다음 버튼에 추가되는 클래스명을 설정합니다. string

name	description	default
itemsLength	슬라이드의 개수를 설정합니다. number
activeIndex	현재 선택된 슬라이드의 인덱스를 설정합니다. number
onClickHandler	인디케이터를 클릭했을 때 실행할 함수를 정의합니다. function
isVertical	세로로 슬라이드를 설정합니다. boolean	false
isOut	인디케이터를 밖으로 보일지 안으로 보일지 설정합니다. boolean	false
outerClassName	인디케이터 배열에 적용될 클래스 이름. string
innerClassName	인디케이터에 적용될 클래스 이름. string