Блог

Я хотел бы создать карусель vuetify для моего веб-сайта с разными фоновыми изображениями и разными текстовыми элементами, но интервал не работает. На веб-сайте vuetify отображается только «Длительность между циклами изображения. Требуется cycle prop.» требуется, чтобы он работал, но, похоже, у меня другая проблема. Я не могу найти решение своей проблемы.

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

Было бы здорово, если бы кто-нибудь мог мне помочь…

Спасибо, Крис

Ибп, моя ошибка…

Мне нужно было поместить интервал на вкладку carousel, а не на вкладку carousel-item…

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