Implement simple carousel using vue.js

I have been learning vue.js for a while. I made a small demo to get familiar with it. A very common demo, ------- carousel chart. Before learning vue, use JavaScript or jquery for carousel chart. They are all very simple, and I found it quite interesting to write them in Vue. Let’s talk about a simple idea. Use v-if or v-show to replace the original JS sliding for image carousel. The transition effect can be easily achieved using transition. Note that you can see two pictures during the sliding process, so you need to use two a transition.

(1) First write the overall framework

<template>
<p class="slide-show">
<p 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>
</p>
</p>
</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>

The above is the detailed content of Implement simple carousel using vue.js. For more information, please follow other related articles on the PHP Chinese website!