How to implement carousel using vue.js

How to use vue.js to implement carousel: first use "" to wrap the corresponding element; then in ".imgShoudMove" Set the animation properties; finally use Vue combined with CSS3 to implement the carousel chart.

The operating environment of this tutorial: windows7 system, vue2.0&&css3 version, Dell G3 computer. This method is suitable for all brands of computers.

This article uses Vue combined with CSS3 to implement the carousel chart.

The first thing you need to understand is the animation principle of Vue. In vue, if we want to animate an element, we need to use a to wrap the corresponding element, as follows:

<transition name="imgShouldMove"> 
 <img  src="/static/imghwm/default1.png"  data-src="/1.jpg"  class="lazy"  v-if="shouldShow"  alt="How to implement carousel using vue.js" > 
</transition>

After that, You can set the animation attributes in .imgShoudMove, as follows:

.imgShouldMove-enter{ 
 transition: all 0.5s; 
} 
.imgShouldMove-enter-active{ 
 transform:translateX(900px); 
}

Note that in HTML, here has a v-if="shoudShow" attribute. The shouldShow attribute is set in data(){}. When shouldShow changes from false to true (that is, when img suddenly appears from nothing), the

Vue animation principle divides the animation into shouldShouldMove- There are two stages: enter and imgShouldMove-enter-active.

Where shouldShouldMove-enter represents the initial state of the animation, imgShouldMove-enter-active represents the termination state of the animation. The animation is triggered through if-show.

Example:

HTML code:

<template>
 <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
 <div class="imgBox">
 <a :href="pics[currentIndex].href" rel="external nofollow" >
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction + &#39;-old&#39;">
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img  src="/static/imghwm/default1.png"  data-src="pics[currentIndex].src"  class="lazy"  v-if="!isShow" : alt="How to implement carousel using vue.js" >
 </transition>
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction ">
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img  src="/static/imghwm/default1.png"  data-src="pics[currentIndex].src"  class="lazy"  v-if="isShow" : alt="How to implement carousel using vue.js" >
 </transition>
 </a>
 </div>
 <h2 id="pics-currentIndex-title">{{pics[currentIndex].title}}</h2>
 <ul class="pagination">
 <li v-for="(item, index) in pics" @click="goto(index)" :
 class="{active:index === currentIndex}">{{index + 1}}</li>
 </ul>
 <div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont"></i></div>
 <div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont"></i></div>
 </div>
</template>
Script代码：
<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:&#39;toleft&#39;
 }
 },
 computed:{
 prevIndex(){
 this.direction = &#39;toleft&#39;
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = &#39;toright&#39;
 if (this.currentIndex >= this.pics.length - 1) {
 return 0
 }
 return this.currentIndex + 1
 }
 },
 methods:{
 goto(index){
 this.isShow = false
 setTimeout(()=>{
 this.isShow = true
 this.currentIndex = index
 },10)
  
 },
 runInterval(){
 this.direction = &#39;toright&#39;
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>

The css code related to animation is as follows

.carousel-trans-toright-enter-active,
.carousel-trans-toright-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toright-enter{ 
 transform:translateX(940px);
  //新图片从右侧940px进入 
} 
.carousel-trans-toright-old-leave-active{ 
 transform:translateX(-940px);
  //老图片向左侧940px出去 
} 
.carousel-trans-toleft-enter-active,
.carousel-trans-toleft-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toleft-enter{ 
 transform:translateX(-940px); 
 //新图片从右侧940px进入 
} 
.carousel-trans-toleft-old-leave-active{ 
 transform:translateX(940px); 
 //老图片向左侧940px出去 
}

Note: For , it needs to be placed in, needs to be set to position:relative; and must be set to position:absolute;. This step is very, very important, otherwise only one picture will be displayed inexplicably every time.

Every time you switch, the goto() method must be triggered, and this.isShow is set to false first. After 10 milliseconds, this.isShow is set to true. At this time, the in the HTML is triggered, which is combined with the CSS to trigger the animation effect. The duration is 0.5s set by the transition in the CSS attribute.

When switching forward and backward, calculated attributes are used. On div.prevBtn and div.nextBtn, we bind the click event to trigger the method goto(), and the incoming positive It is the calculated attribute prevIndex, @click="goto(prevIndex)"

The setting method of the calculated attribute is as follows:

computed:{ 
 prevIndex(){ 
 //经过一番计算过程得出result 
 return result //这个值即<template>中的prevIndex 
 } 
 },

When automatically sliding every 2 seconds, we slide to the left, in the data , the variable direction is set, and its value is either the string 'toleft' or 'toright'.

We set this.direction in the calculated attribute, and concatenated the corresponding name with strings in

<transition v-bind:name="&#39;carousel-trans-&#39; + direction ">

In vue, in addition to class and style can be passed in objects and arrays, and other attribute bindings must be string spliced.

Recommended: "vue tutorial"

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