I am trying to use Vuetify's v-carousel but with a static image and only utilize the carousel for transitioning texts. So I have the carousel and the same image is being used across each carousel item but the issue is to keep the "sliding" effect it also slides the image. This is not an issue if the image was just a base color but since it is an image it makes it look odd. I only want the text to move.
My Initial Code:
<template>
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
:src="/path/to/img.png"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide {{ i + 1 }}
</div>
</v-row>
</v-carousel-item>
</v-carousel>
</template>
I have tried appending a v-img into the code so it look like:
<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-img src="/path/to/img.png" />
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide {{ i + 1 }}
</div>
</v-row>
</v-carousel-item>
</v-carousel>
</template>
I have also tried making the image a v-sheet and putting the text on top but it still gives off the sliding effect. Is this possible to do or should I be going down a different route?