Vuetify 轮播间隔

问题描述

我想用不同的背景图片和不同的文本元素为我的网站构建一个 vuetify 轮播，但 间隔 不起作用。仅根据 vuetify 网站“图像循环之间的持续时间。需要循环道具”。需要使其工作，但似乎我有一个不同的问题。我找不到解决我的问题的方法。

<!-- SHOW FROM SM to XL-->
  <v-carousel hide-delimiters class="hidden-xs-only">
    <v-carousel-item
      v-for="(content,i) in carouselContents"
      :key="i"
      :src="require('@/assets/index/' + content.imageSrc)"
      continuous="true"
      cycle="true"
      interval="1000"
      show-arrows-on-hover
    >
      <v-row
        align="center"
        justify="center"
      >
        <v-col cols="12" xs="1" sm="1" md="1" lg="1" xl="1">
          <!-- TEXT disTANCE FOR BIG disPLAYS -->
        </v-col>
        <v-col cols="12" xs="10" sm="10" md="10" lg="8" xl="7">
          <div class="white--text text-left mt-16 mb-8 text-h4 text-md-h3 text-lg-h3 text-xl-h2 font-weight-medium">
            <p> 
              {{ content.headline1 }}
            </p>
            <v-divider class="my-5"></v-divider>
            <p>
              {{ content.headline2 }}
            </p>
          </div>
        </v-col>
        <v-col cols="12" xs="1" sm="1" md="1" lg="3" xl="4">
          <!-- TEXT disTANCE FOR BIG disPLAYS -->
        </v-col>
      </v-row>

      <v-row
        align="center"
        justify="center"
      >
        <v-col cols="12" sm="1" md="1" lg="1" xl="1">
          <!-- TEXT disTANCE FOR BIG disPLAYS -->
        </v-col>
        <v-col cols="12" sm="10" md="10" lg="8" xl="7">          
          <div class="text-left">
            <p class="white--text text-subtitle-1 font-weight-medium"> 
            {{text2a}} <u>{{text2b}}</u> {{text2c}}
            </p>
            <router-link :to="{ name: 'Signup' }">
              <v-btn tile x-large color="white" class="my-5 black--text">
                <span>{{button1}}</span>
                <v-icon right>{{mdiPencilPlus}}</v-icon>
              </v-btn>
            </router-link>
          </div>
        </v-col>
          <v-col cols="12" sm="1" md="1" lg="3" xl="4">
            <!-- TEXT disTANCE FOR BIG disPLAYS -->
        </v-col>
      </v-row>
    </v-carousel-item>
  </v-carousel>

...

  carouselContents: [
    {
      headline1: "EXAMPLE_TEXT_ABOVE",headline2: "EXAMPLE_TEXT_BELOW",imageSrc: "create.jpg",},{
      headline1: "EXAMPLE_TEXT_ABOVE",imageSrc: "view.jpg",imageSrc: "share.jpg",imageSrc: "compare.jpg",imageSrc: "build.jpg",],

如果有人能帮助我就好了...

谢谢 克里斯

解决方法

UPS，我的错误...

我需要将间隔放在轮播选项卡而不是轮播项目选项卡中...

  <v-carousel 
    hide-delimiters 
    class="hidden-xs-only"
      continuous="true"
      cycle="true"
      interval="1000"
      show-arrows-on-hover
   >
    <v-carousel-item
      v-for="(content,i) in carouselContents"
      :key="i"
      :src="require('@/assets/index/' + content.imageSrc)"
    >