Carousel

O componente v-carousel é usado para exibir diversos conteúdos visuais de forma rotativa com temporizador.

Utilização

A carousel by default has a slide transition.

API

v-carousel
Nome
active-class
Padrão
'v-item--active'
Tipos
string

Components.Carousels.

Nome
cycle
Padrão
true
Tipos
boolean

Determina se o carrossel deve circular entre as imagens

Nome
dark
Padrão
false
Tipos
boolean

Components.Carousels.

Nome
delimiter-icon
Padrão
'$vuetify.icons.delimiter'
Tipos
string

Define o ícone do delimitador do carrossel

Nome
height
Padrão
500
Tipos
number | string

Define a altura do componente

Nome
hide-controls
Padrão
false
Tipos
boolean

Oculta os controles de navegação

Nome
hide-delimiters
Padrão
false
Tipos
boolean

Oculta o painel com delimitadores do carrossel

Nome
interval
Padrão
6000
Tipos
number | string

A duração entre ciclos de imagem

Nome
light
Padrão
false
Tipos
boolean

Components.Carousels.

Nome
mandatory
Padrão
true
Tipos
boolean

Components.Carousels.

Nome
max
Padrão
undefined
Tipos
number | string

Define a largura máxima

Nome
multiple
Padrão
false
Tipos
boolean

Components.Carousels.

Nome
next-icon
Padrão
$vuetify.icons.next
Tipos
boolean | string

Mixins.Input.props.appendIcon

Nome
prev-icon
Padrão
$vuetify.icons.prev
Tipos
boolean | string

Mixins.Input.props.prependIcon

Nome
reverse
Padrão
false
Tipos
boolean

Components.Carousels.

Nome
touch
Padrão
undefined
Tipos
object

Components.Carousels.

Nome
touchless
Padrão
false
Tipos
boolean

Components.Carousels.

Nome
value
Padrão
undefined
Tipos
any

Controla visibilidade

Nome
vertical
Padrão
false
Tipos
boolean

Components.Carousels.

Exemplos

Transição personalizada

Você também pode aplicar sua própria transição personalizada.

Ícones personalizados

Você também pode alterar o ícone do delimitador do carrossel e os ícones anterior/próximo.

Ocultar controles

Você pode ocultar os controles inferiores com a propriedade 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