How to use Vue's carousel component

This time I will show you how to use the Vue carousel component, and what are the precautions when using the Vue carousel component. The following is a practical case, let's take a look.

This article uses Vue combined with css3 to realize the carousel chart.

The first thing 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> 
 <img  src="/static/imghwm/default1.png" data-src="/1.jpg" class="lazy" alt="How to use Vue's carousel component" > 
</transition>

After that, you can set the animation properties in .imgShoudMove, as follows:

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

Note that in HTML, has a v-if="shoudShow" attribute. The attribute shouldShow 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 There are two stages: shouldShouldMove-enter and imgShouldMove-enter-active.

My own understanding of it is that shouldShouldMove-enter represents the initial state when the animation starts, and imgShouldMove-enter-active represents the termination state of the animation. The animation is triggered through if-show.

As shown below

After understanding this, I can start to implement the carousel component.

The first is the HTML code:

<template>
 <p>
 </p>
<p>
 <a>
 <transition>
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img  src="/static/imghwm/default1.png" data-src="pics[currentIndex].src" class="lazy" alt="How to use Vue's carousel component" >
 </transition>
 <transition>
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img  src="/static/imghwm/default1.png" data-src="pics[currentIndex].src" class="lazy" alt="How to use Vue's carousel component" >
 </transition>
 </a>
 </p>
 <h2 id="pics-currentIndex-title">{{pics[currentIndex].title}}</h2>
 <ul>
 <li>{{index + 1}}</li>
 </ul>
 <p><i></i></p>
 <p><i></i></p>
 
</template>

Script code:

<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出去 
}

---------------The following is an explanation-------------

Note: needs to be placed inside , 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.

At each switch, the goto() method must be triggered, setting this.isShow to false first, and 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 properties are used. On p.prevBtn and p.nextBtn, we bind click events to trigger the method goto(), and the calculated property prevIndex is passed in, @ click="goto(prevIndex)"

The setting method of calculated attributes is as follows:

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

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

We set this.direction in the calculated attribute, and performed string concatenation on the corresponding name in

<transition></transition>

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use swiper component to achieve carousel advertising effect

vue implements marquee scrolling of images

The above is the detailed content of How to use Vue's carousel component. For more information, please follow other related articles on the PHP Chinese website!