Carousel

El componente v-carousel se utiliza para mostrar grandes cantidades de contenido visual en un timer rotativo.

Uso

A carousel by default has a slide transition.

API

v-carousel
Nombre
active-class
Default
'v-item--active'
Type
string

Components.Carousels.

Nombre
cycle
Default
true
Type
boolean

Determina si el carrusel debe hacer mostrar las imágenes en un ciclo

Nombre
dark
Default
false
Type
boolean

Aplica la variante del tema dark

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

Configura el ícono para el delimitador del carrusel

Nombre
height
Default
500
Type
number | string

Configura la altura del componente

Nombre
hide-controls
Default
false
Type
boolean

Esconde los controles de navegación

Nombre
hide-delimiters
Default
false
Type
boolean

Esconde el panel con los delimitadores del carrusel

Nombre
interval
Default
6000
Type
number | string

La duración entre imágenes en el ciclo

Nombre
light
Default
false
Type
boolean

Aplica la variante del tema light

Nombre
mandatory
Default
true
Type
boolean

Components.Carousels.

Nombre
max
Default
undefined
Type
number | string

Configura el ancho máximo

Nombre
multiple
Default
false
Type
boolean

Components.Carousels.

Nombre
next-icon
Default
$vuetify.icons.next
Type
boolean | string

El ícono a mostrar para forzar la paginación al siguiente elemento

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

El ícono a mostrar para forzar la paginación al elemento anterior

Nombre
reverse
Default
false
Type
boolean

Components.Carousels.

Nombre
touch
Default
undefined
Type
object

Components.Carousels.

Nombre
touchless
Default
false
Type
boolean

Components.Carousels.

Nombre
value
Default
undefined
Type
any

Controla la visibilidad

Nombre
vertical
Default
false
Type
boolean

Components.Carousels.

Ejemplos

Transición personalizada

También puedes aplicar tu propia transición personalizada.

Custom icons

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

Esconder los controles

Puedes esconder los controles de la parte inferior con la prop hide-controls.

Hide delimiters

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore