Carousels
The v-carousel component is used to display large numbers of visual content on a rotating timer.
Usage
The v-carousel component expands upon v-window by providing additional features targeted at displaying images.
<v-carousel>
<v-carousel-item
src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
cover
></v-carousel-item>
<v-carousel-item
src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg"
cover
></v-carousel-item>
<v-carousel-item
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
cover
></v-carousel-item>
</v-carousel>API
| Component | Description |
|---|---|
| v-carousel | Primary component |
| v-carousel-item | Sub-component used for displaying the v-carousel state |
Examples
Props
Custom delimiters
Use any available icon as your carousel’s slide delimiter.
Custom transition
The v-carousel-item component can have its transition/reverse-transition changed.
Crossfade transition using crossfade prop requires 3.10.0.
default, slowerduration change suppressed - prefers-reduced-motion: reducecrossfadecross-scale (custom)scale suppressed - prefers-reduced-motion: reduceCycle
With the cycle prop you can have your slides automatically transition to the next available every 6s (default).
Hide controls
You can hide the carousel navigation controls with :show-arrows="false". Or you can make them only appear on hover with show-arrows="hover".
Customized arrows
Arrows can be customized by using prev and next slots.
Hide delimiters
You can hide the bottom controls with hide-delimiters prop.
Progress
You can show a linear progress bar with the progress prop. It will indicate how far into the cycle the carousel currently is.
Model
You can control carousel with v-model.
Misc
Vertical with overlay content
Carousel can be augmented with additional content simply by placing VOverlay next to it.