How to write a carousel image in vue.js

Vue.js method to write a carousel chart: first write the overall framework; then define the array of carousel charts and upload local images; finally change the status of the carousel chart by changing the custom variable nowindex .

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

[Related article recommendations: vue.js]

##How to write a carousel image in vue.js:

Let’s talk about a simple idea. Use

v-if or v-show for image carousel instead of the original Js sliding, and use transition for transition effect. It can be easily implemented. Note that you can see two pictures during the sliding process, so you need to use two transitions.

(1) First write the overall framework

<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img  src="/static/imghwm/default1.png"  data-src="imgArray[nowindex]"  class="lazy"  v-if=&#39;ifshow&#39; :src=&#39;imgArray[nowindex]&#39; alt="How to write a carousel image in vue.js" >
</transition>
<transition name="slide-trans-old">
  <img  src="/static/imghwm/default1.png"  data-src="imgArray[nowindex]"  class="lazy"  v-if="!ifshow" : alt="How to write a carousel image in vue.js" >
 </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 imgArray photos, bind on to the span to light up the small dots, photo The display and hiding 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.

Related free learning recommendations: JavaScript(Video)

The above is the detailed content of How to write a carousel image in vue.js. For more information, please follow other related articles on the PHP Chinese website!