How to implement carousel using vue.js

How to use vue.js to implement carousel: first use "b7d6aa7d26bbcf1354a58cda375316e1" 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 b7d6aa7d26bbcf1354a58cda375316e16087faffb1c3f26530d25a6b190c2f81 to wrap the corresponding element, as follows:

<transition name="imgShouldMove"> 
 <img v-if="shouldShow" src="/1.jpg"> 
</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 a1f02c36ba31691bcfe87b2722de723b 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 v-if="!isShow" :src="pics[currentIndex].src">
 </transition>
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction ">
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img v-if="isShow" :src="pics[currentIndex].src">
 </transition>
 </a>
 </div>
 <h2>{{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 a1f02c36ba31691bcfe87b2722de723b, it needs to be placed in0b00252d9a4a839112aa676868a36486, a8a2d94ad6460784ca7a88c66ac1760a needs to be set to position:relative; and a1f02c36ba31691bcfe87b2722de723b 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 300ff3b250bc578ac201dd5fb34a0004 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 d477f9ce7bf77f53fbcf36bec1b69b7a, as follows

<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!