Vuetify 轮播间隔

Question

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

<!-- 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",
      headline2: "EXAMPLE_TEXT_BELOW",
      imageSrc: "view.jpg",
    },
    {
      headline1: "EXAMPLE_TEXT_ABOVE",
      headline2: "EXAMPLE_TEXT_BELOW",
      imageSrc: "share.jpg",
    },
    {
      headline1: "EXAMPLE_TEXT_ABOVE",
      headline2: "EXAMPLE_TEXT_BELOW",
      imageSrc: "compare.jpg",
    },
    {
      headline1: "EXAMPLE_TEXT_ABOVE",
      headline2: "EXAMPLE_TEXT_BELOW",
      imageSrc: "build.jpg",
    },
  ],

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

谢谢克里斯

Answer 1

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)"
    >

Vuetify 轮播间隔

Vuetify carousel interval

timer

slider

intervals

vue.js

vuetify.js