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.
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.
Cycle
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.