Carousel

The v-carousel component is used to display large numbers of visual content on a rotating timer.

Usage

A carousel by default has a slide transition.


API

v-carousel
Name
active-class
Default
'v-item--active'
Type
string
Name
cycle
Default
true
Type
boolean

Determines if carousel should cycle through images

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
delimiter-icon
Default
'$vuetify.icons.delimiter'
Type
string

Sets icon for carousel delimiter

Name
height
Default
500
Type
number | string

Sets the component height

Name
hide-controls
Default
false
Type
boolean

Hides the navigation controls

Name
hide-delimiters
Default
false
Type
boolean

Hides the panel with carousel delimiters

Name
interval
Default
6000
Type
number | string

The duration between image cycles

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
mandatory
Default
true
Type
boolean
Name
max
Default
undefined
Type
number | string

Sets maximum width

Name
multiple
Default
false
Type
boolean
Name
next-icon
Default
$vuetify.icons.next
Type
boolean | string

The displayed icon for forcing pagination to the next item

Name
prev-icon
Default
$vuetify.icons.prev
Type
boolean | string

The displayed icon for forcing pagination to the previous item

Name
reverse
Default
false
Type
boolean
Name
touch
Default
undefined
Type
object
Name
touchless
Default
false
Type
boolean
Name
value
Default
undefined
Type
any

Controls visibility

Name
vertical
Default
false
Type
boolean

Examples

Custom transition

You can also apply your own custom transition.


Custom icons

You can also change the icon for the carousel delimiter and previous/next icons.


Hide controls

You can hide the navigation controls with the hide-controls prop.


Hide delimiters

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