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文字不会在轮播图片上显示

1 个答案: