Интервал карусели 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",
      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",
    },
  ],

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

Спасибо Крис

Почему в Python есть оператор &quot;pass&quot;?
Почему в Python есть оператор "pass"?
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
531
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Упс, моя ошибка...

Мне нужно было указать интервал на вкладке карусели, а не на вкладке элементов карусели...

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

Другие вопросы по теме