Carousel
The VCarousel component provides a slideshow interface for cycling through content with automatic progression and manual navigation.
<template>
<v-carousel height="400">
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
/>
</v-carousel>
</template>
<script setup>
import { ref } from 'vue'
const items = ref([
{ src: 'https://picsum.photos/1920/1080?random=1' },
{ src: 'https://picsum.photos/1920/1080?random=2' },
{ src: 'https://picsum.photos/1920/1080?random=3' }
])
</script>
The currently active slide index or ID.
height
number | string
default:"500"
Height of the carousel in pixels.
Color applied to the delimiter buttons.
Enables automatic slide progression.
interval
number | string
default:"6000"
Time in milliseconds between automatic slide transitions.
Hides the navigation delimiter buttons.
Removes the background from the delimiter controls area.
delimiterIcon
string
default:"$delimiter"
Icon used for delimiter buttons.
progress
boolean | string
default:"false"
Shows a progress bar. Pass a color string to customize.
verticalDelimiters
boolean | 'left' | 'right'
default:"false"
Positions delimiters vertically. Options: true, 'left', 'right'.
showArrows
boolean | 'hover'
default:"true"
Controls visibility of navigation arrows. Use 'hover' to show on hover only.
Enables continuous looping of slides.
direction
string
default:"horizontal"
Slide transition direction. Options: horizontal, vertical.
Emitted when the active slide changes.
Default slot for carousel items.
Customize individual delimiter buttons.
Customize the previous arrow button.
Customize the next arrow button.
Examples
Auto-Cycling
<template>
<v-carousel
cycle
:interval="3000"
height="400"
>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
/>
</v-carousel>
</template>
With Progress Bar
<template>
<v-carousel
progress="primary"
height="400"
>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
/>
</v-carousel>
</template>
Vertical Delimiters
<template>
<v-carousel
vertical-delimiters="right"
height="400"
>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
/>
</v-carousel>
</template>
Custom Content
<template>
<v-carousel height="400">
<v-carousel-item
v-for="(item, i) in items"
:key="i"
>
<v-sheet height="100%" color="primary">
<div class="d-flex fill-height align-center justify-center">
<h1 class="text-h2">{{ item.title }}</h1>
</div>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
<script setup>
import { ref } from 'vue'
const items = ref([
{ title: 'Slide 1' },
{ title: 'Slide 2' },
{ title: 'Slide 3' }
])
</script>
Hide Navigation
<template>
<v-carousel
hide-delimiters
:show-arrows="false"
height="400"
>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
/>
</v-carousel>
</template>