Vuetify carousel interval

Question

I'd like to build a vuetify carousel for my webste with different background pictures and different text elements but the interval does not work. Accoding to the vuetify website only the "The duration between image cycles. Requires the cycle prop." is required to make it work but it seems I have a different problem. I can't find a solution for my problem.

<!-- 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",
    },
  ],

It qould be great if someone could help me...

Thanks Chris

Answer 1

Ups, my mistake...

I needed to put the interval in the carousel tab and not the carousel-item tab...

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