我尝试创建一个Vue.js Carousel作为组件。但是,我输了。
它应该每隔5秒更改为下一个“滑块”,包含图像和文本。或者,如果可以,请在说明中添加一个链接。
友好的关注
P.S我是新手。
<template>
<div >
<div class="carousel"
v-for="(item,i) in items"
:key="i"
:src="item.source"
:alt="item.alt"
transition="fade"
>
<div class="carousel-image">
<img v-attr="item.src" alt="image">
</div>
<div class="carousel-text">
<p>{{item.title}}</p>
<p>{{item.position}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
source: '../assets/companies/migros.svg.png',
title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
alt: "1",
position: "Jon Doe, -- Migros Chef "
},
{
source: '../assets/companies/xxx.svg.png',
title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
alt: "2",
position: "Jon Doe, -- xxx "
},
]
}
}
}
</script>
举个例子:
var app = new Vue({
el: '#app',
data() {
return {
list: [1,2,3,4],
curIndex: 0
}
},
created () {
window.setInterval(_=>{
if(this.curIndex+1>this.list.length-1){
this.curIndex = 0;
}else{
this.curIndex++
}
},3000)
}
})
.wrapper{
width: 200px;
height: 100px;
position: relative;
}
.wrapper>div{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
}
.wrapper>div:nth-child(1){
background: red;
}
.wrapper>div:nth-child(2){
background: blue;
}
.wrapper>div:nth-child(3){
background: orange;
}
.wrapper>div:nth-child(4){
background: yellow;
}
.fade-enter,.fade-leave-active{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity .5s ease-in-out;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<transition-group tag="div" class="wrapper" name="fade">
<div v-for="(item,index) of list" :key="index" v-show="index==curIndex">
{{item}}
</div>
</transition-group>
</div>