캐러셀 (Carousel)

v-carousel 컴포넌트는 많은 수의 비쥬얼 컨텐츠(visual conents) 를 회전 타이머(rotating timer)를 이용해 보여줍니다.

사용법

캐러셀의 기본 동작은 슬라이드 트랜지션입니다.


API

v-carousel
이름
active-class
디폴트
'v-item--active'
타입
string
이름
cycle
디폴트
true
타입
boolean

케러솔의 이미지가 순환할 것인지 정합니다.

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
delimiter-icon
디폴트
'$vuetify.icons.delimiter'
타입
string

아이콘을 케러설 구분자(delimiter)로 지정합니다.

이름
height
디폴트
500
타입
number | string

컴포넌트의 높이를 설정

이름
hide-controls
디폴트
false
타입
boolean

내비게이션 컨트롤러를 숨깁니다

이름
hide-delimiters
디폴트
false
타입
boolean

캐러셀 구분자(delimiter)를 숨깁니다.

이름
interval
디폴트
6000
타입
number | string

이미지 순환 시간 간격

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
mandatory
디폴트
true
타입
boolean
이름
max
디폴트
undefined
타입
number | string

최대 너비(maximum width)를 설정

이름
multiple
디폴트
false
타입
boolean
이름
next-icon
디폴트
$vuetify.icons.next
타입
boolean | string

컴포넌트 뒤에 아이콘을 덧붙임. v-icon과 같은 문법을 사용

이름
prev-icon
디폴트
$vuetify.icons.prev
타입
boolean | string

컴포넌트 앞에 아이콘을 추가. v-icon과 같은 문법을 사용

이름
reverse
디폴트
false
타입
boolean
이름
touch
디폴트
undefined
타입
object
이름
touchless
디폴트
false
타입
boolean
이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

이름
vertical
디폴트
false
타입
boolean

예제

커스텀 트랜지션 (Custom transition)

사용자 커스텀 트랜지션을 적용할 수 있습니다.


커스텀 아이콘

캐러셀의 구분자와 이전/다음 아이콘을 바꿀 수 있습니다.


컨트롤 숨기기 (Hide controls)

하단의 컨트롤을 숨기려면 hide-controls prop 을 사용합니다.(이것도 오타같습니다. 실제론 좌우 전환 컨트롤을 숨깁니다. 델리미터를 숨기는 건 hide-delemiters 입니다.)


Hide delimiters

You can hide the bottom controls with the hide-delimiters prop.