how to create vuetify icon slid console - vue.js

Question

i am new for vuetify implementing vuetify icon slid console but im confuse.
below console code contained image slide show, using this code i what to implement example image
i want to show like this
<template>
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="display-3">{{ slide }} Slide</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
<script>
export default {
data () {
return {
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
}
</script>

Answer 1

You can define a <v-row/> inside the <v-carousel-item/> then fill it with <v-col/>. Each <v-col/> represents the image/icon and the caption.
<v-carousel
...
>
<v-carousel-item v-for="(slide, i) in 7" :key="i">
<v-row>
<v-col cols="3" v-for="(images, j) in 16" :key="j">
<div class="d-flex flex-column justify-center align-center">
<v-img src="https://via.placeholder.com/50" width="50"/> <!-- can also be `<v-icon/>` -->
<span class="mx-auto text-center caption">Caption</span>
</div>
</v-col>
</v-row>
</v-carousel-item>
</v-carousel>
Here's a sample demo.