I'm making a custom component (a slider), but for now it only passes images through an array, what I want is that instead of passing images, I can insert a child component through a slot without using arrays.
<div class="carousel">
<transition-group tag='ul' class="clearfix slide" name='image'>
<li v-for='(image,index) in imglist' :key='index' v-show='index===mark'>
<a><img :src="image"></a>
</li>
</transition-group>
<div class="bullet">
<span v-for='(item,index) in imglist.length' v-bind:key="item" :class="{'active':index===mark}" @click='change(index)'></span>
</div>
this is the script
data() {
return {
mark: 0,
imglist: ['images/bn1.jpg',
'images/bn2.jpg',
'images/bn3.jpg'
]
}
},
created() {
this.play()
},
methods: {
change(i) {
this.mark = i
},
autoPlay() {
this.mark++;
if (this.mark === this.imglist.length) {
this.mark = 0;
return
}
},
play() {
setInterval(this.autoPlay, 3000)
}
}
}
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment