Я хотел бы создать карусель 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",
},
],
Было бы здорово, если бы кто-нибудь мог мне помочь...
Спасибо Крис
Упс, моя ошибка...
Мне нужно было указать интервал на вкладке карусели, а не на вкладке элементов карусели...
<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)"
>