Can vue.js make carousel images?

vue.js can make carousel images. The implementation method is: first write the overall framework; then render the number of small dots according to the array of imgArray photos; then bind span to the small dots. The bright state; finally, use the custom variable ifshow to display the display and hide of the image, and set nowindex to control the carousel.

The operating environment of this tutorial: windows7 system, vue version 2.0. This method is suitable for all brands of computers.

Related recommendations: "vue.js Tutorial"

I recently learned vuejs and tried to write a simple image carousel using vuejs , let’s make a simple record

(1) First write the overall framework

<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img v-if=&#39;ifshow&#39; :src=&#39;imgArray[nowindex]&#39;>
</transition>
<transition name="slide-trans-old">
  <img v-if="!ifshow" :src="imgArray[nowindex]">
 </transition>
<ul class="slide-pages">
<li v-for="(item,index) in imgArray">
<span :class="{on :index===nowindex}" @click="goto(index)"></span>
</li>
</ul>
</div>
</div>
</template>

Render the number of small dots based on the array of the photo imgArray, and bind on to the small circle for span In the lit state, the display and hiding of photos are displayed through the custom variable ifshow, and nowindex controls the photos corresponding to the carousel.

(2) If the array of carousel images is a local image and is not placed under a static file, please circle the path with require, otherwise the path will report an error. Not required if obtained from the backend server.

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

(3) The main purpose is to change the status of the carousel image by changing the custom variable nowindex. It should be noted that two images can be seen during the sliding process, so a short timing is set in the goto function. The device allows one to be displayed and the other to be hidden, and different transition effects can be added to each.

<script type="text/javascript">
export default {
props:{
imgArray:{
type:Array,
default:[]
}
},
data() {
return {
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex === this.imgArray.length -1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto(index){
let that = this;
this.ifshow = false;
setTimeout(function(){
that.ifshow = true;
that.nowindex = index;
},100)
 
},
timerun(){
 let that = this;
 setInterval(function(){
 that.goto(that.nextindex)
 },2000)
 }
}
}
</script>

Here, this simple carousel image ends.

The above is the detailed content of Can vue.js make carousel images?. For more information, please follow other related articles on the PHP Chinese website!