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>

Vuetify 文本不会显示在轮播图像上

Vuetify text doesn't display over carousel image

text

image

carousel

vue.js

vuetify.js