Carousels

The v-carousel component is used to display large numbers of visual content on a rotating timer.

<PageFeatures />

Usage

The v-carousel component expands upon v-window by providing additional features targeted at displaying images.

<ExamplesUsage name="v-carousel" /> <PromotedEntry />

API

Component	Description
v-carousel	Primary component
v-carousel-item	Sub-component used for displaying the v-carousel state

<ApiInline hide-links />

Examples

Props

Custom delimiters

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

<ExamplesExample file="v-carousel/prop-custom-icons" />

Custom transition

The v-carousel-item component can have its transition/reverse-transition changed.

::: info Crossfade transition using crossfade prop requires 3.10.0. :::

<ExamplesExample file="v-carousel/prop-custom-transition" />

Cycle

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

<ExamplesExample file="v-carousel/prop-cycle" />

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

<ExamplesExample file="v-carousel/prop-hide-controls" />

Customized arrows

Arrows can be customized by using prev and next slots.

<ExamplesExample file="v-carousel/slots-next-prev" />

Hide delimiters

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

<ExamplesExample file="v-carousel/prop-hide-delimiters" />

Progress

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

<ExamplesExample file="v-carousel/prop-progress" />

Model

You can control carousel with v-model.

<ExamplesExample file="v-carousel/prop-model" />

Misc

Vertical with overlay content

Carousel can be augmented with additional content simply by placing VOverlay next to it.

<ExamplesExample file="v-carousel/misc-vertical" />