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

Examples

Props

Custom delimiters

Use any available icon as your carousel’s slide delimiter.

v-carousel/prop-custom-icons.vue

Cycle

With the cycle prop you can have your slides automatically transition to the next available every 6s (default).

v-carousel/prop-cycle.vue

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

v-carousel/prop-hide-controls.vue

Customized arrows

Arrows can be customized by using prev and next slots.

v-carousel/slots-next-prev.vue

Hide delimiters

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

v-carousel/prop-hide-delimiters.vue

Progress

You can show a linear progress bar with the progress prop. It will indicate how far into the cycle the carousel currently is.

v-carousel/prop-progress.vue

Model

You can control carousel with v-model.

v-carousel/prop-model.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.