Текст Vuetify не отображается поверх изображения карусели

Question

Я использую VueJS и Vuetify, и когда следующее изображение в карусели показывает, что текст там только мигает и исчезает.

Я хочу, чтобы текст отображался вместе с изображением, и я не хочу его создавать ненужные слайды из-за двух петель.

Мой код:

<template>
  <v-carousel hide-delimiters height="750" show-arrows-on-hover cycle>
    <v-carousel-item v-for="(item, i) in items" :key="i" :src="item.src">
      <v-carousel-item v-for="(slide, i) in slides" :key="i">
        <v-row class="fill-height" align="center" justify="center">
          <div class="display-3 white--text">{{ slide }}</div>
        </v-row>
      </v-carousel-item>
    </v-carousel-item>
  </v-carousel>
</template>

Мой скрипт:

<script>
export default {
  name: "homeCarousel",

  data() {
    return {
      items: [
        {
          src: "https://w.wallhaven.cc/full/d5/wallhaven-d518dj.jpg"
        },
        {
          src: "https://w.wallhaven.cc/full/j8/wallhaven-j82el5.png"
        },
        {
          src: "https://w.wallhaven.cc/full/yj/wallhaven-yj1qk7.png"
        }
      ],
      slides: ["Innovation", "Design", "Technology"]
    };
  }
};
</script>

Answer 1

Вам нужен только один v-carousel-item и для slides ссылки slides[i]

<template>
  <v-carousel hide-delimiters height="750" show-arrows-on-hover cycle>
    <v-carousel-item v-for="(item, i) in items" :key="i" :src="item.src">
      <v-row class="fill-height" align="center" justify="center">
        <div class="display-3 white--text">{{ slides[i] }}</div>
      </v-row>
    </v-carousel-item>
  </v-carousel>
</template>