About how to use the vue.js carousel component

This article mainly introduces in detail how to use the vue.js carousel component. It has a certain reference value. Interested friends can refer to

I have written carousels with jQuery before. Component, using jquery animation to achieve picture sliding effect. The sliding effect of this component is realized by native js and vue's data binding. It does not rely on other libraries. Although swiper can be introduced into vue.js, the biggest disadvantage of introducing class libraries is that there are too many redundant codes, so it is better to do it yourself It is better to write one that is simple and concise. (PS: There is still a small bug in the width and height setting of the component. In the sub-component, you need to use js to dynamically modify the width and height of the container. In addition, there may be unreasonable things in other places. You are welcome to criticize and correct me)

github address: git@github.com:cainiao222/vueslider-components.git

Parent component code:

<template>
 <p>
 <slider :img="img" :width="width" :height="height"></slider>
 </p>

</template>

<script>
// import swiper from &#39;swiper&#39;

 import slider from &#39;./slider1.vue&#39;


 export default {

 data(){
 return {
 img:[{src:require(&#39;../assets/slideShow/pic1.jpg&#39;),name:&#39;hehe1&#39;},
  {src:require(&#39;../assets/slideShow/pic2.jpg&#39;),name:&#39;hehe2&#39;},
  {src:require(&#39;../assets/slideShow/pic3.jpg&#39;),name:&#39;hehe3&#39;},
  {src:require(&#39;../assets/slideShow/pic4.jpg&#39;),name:&#39;hehe4&#39;}
 ],
 width:460,
 height:250
 }
 },

 components:{
 slider:slider
 }
 }
</script>

Subcomponent code:

<template>
 <p class="box">
 <p @mouseenter="endInterval" @mouseleave="startInterval" class="container">
 <p :style="{width:wrap_width+&#39;px&#39;,height:wrap_height+&#39;px&#39;,left:offset_left+&#39;px&#39;}" class="slider-wrap">
 <p class=&#39;img&#39; v-for="item in slider_des">
  <img :src="item.src" alt="">
 </p>
 </p>
 <p class="bottom">
 <ul class="pointContainer">
  <li @click="changeIndex(index)" :class="{point:true,active:nowIndex===index}" v-for="(point,index) in length"></li>
 </ul>
 </p>
 <p @click="pre" class="click pre"><</p>
 <p @click="next" class="click next">></p>
 </p>
 </p>
</template>

<script>
 export default {
 props:{
 img:{
 type:Array,
 default:[]
 },
 width:{
 type:Number,
 default:460
 },
 height:{
 type:Number,
 default:250
 }
 },

 mounted(){
 this.startInterval();
 },

 data(){
 console.log(this.width);
 return{
 length:new Array(this.img.length),
 nowIndex:0,
 wrap_width:this.width*(this.img.length+2),
 wrap_height:this.height,
 offset_left:-this.width,
 isTransition:true,
 timer:null,
 animateFlag:true,
 timerAuto:null
 }
 },
 computed:{
 slider_des:function () {
 var arr=[];
 var arr1=arr.concat(this.img);
 arr1.push(this.img[0]);
 arr1.unshift(this.img[this.img.length-1]);
 return arr1;
 }
 },
 methods:{
 pre(){
 if(this.nowIndex===0){
  if(!this.animateFlag){
  clearInterval(this.timer);
  this.animateFlag=true;
  this.offset_left=-(this.length.length)*this.width;
  }
  this.animate(-this.width,0,function (that) {
  that.offset_left=-(that.length.length)*that.width;
  });
  this.nowIndex=this.img.length-1;
  return
 }else{
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-(this.nowIndex*this.width);
  }
  this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex*this.width));
 }
 this.nowIndex-=1;
 },
 startInterval(){
 this.timerAuto=setInterval(this.next,2000);
 },
 endInterval(){
// console.log("leave");
 clearInterval(this.timerAuto);
 },
 next(){
 if(this.nowIndex===this.length.length-1){
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-this.width;
  }
  this.animate(-(this.length.length)*this.width,-(this.length.length+1)*this.width,function (that) {
  that.offset_left=-that.width;
  });
  this.nowIndex=0;
  return
 }else{
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-(this.nowIndex+2)*this.width;
  }
  this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex+2)*this.width);
  this.nowIndex+=1;
 }
 },
 animate(start,end,fuc){
 var distance=end-start;
 var pre_dis=distance/50;
 var that=this;
 this.timer=setInterval(function () {
  that.animateFlag=false;
  if(Math.abs(end-that.offset_left)<=Math.abs(pre_dis)){
  that.offset_left=end;
  if(fuc){
  fuc(that);
  }
  that.animateFlag=true;
  clearInterval(that.timer);
  that.timer=null;
  return
  }
  that.offset_left+=pre_dis;
 },1);
 },
 changeIndex(index){
 clearInterval(this.timer);
 this.animate(-(this.nowIndex+1)*this.width,-(index+1)*this.width);
 this.nowIndex=index;
 }
 }
 }
</script>


<style scoped>
 *{
 margin: 0;
 list-style: none;
 /*height: 0;*/
 }
 .box{
 position: relative;
 }
 .container{
 width: 460px;
 height: 250px;
 margin: 0 auto;
 border: 1px solid #3bb4f2;
 overflow: hidden;
 left: 0;
 top: 0;
 position: absolute;
 }

 .slider-wrap{
 /*width: 2760px;*/
 /*height: 250px;*/
 position: absolute;
 /*left: -460px;*/
 /*overflow: hidden;*/
 top: 0;
 }

 .transition{
 transition: 0.5s;
 }

 .img{
 width: 460px;
 height: 250px;
 float: left;
 display: inline;
 }

 img{
 width: 460px;
 height: 250px;
 /*float: left;*/
 }

 .click{
 width: 20px;
 background-color: rgba(255,255,255,.3);
 color: aliceblue;
 font-weight: bold;
 position: absolute;
 height: 40px;
 line-height: 40px;
 margin-top: -20px;
 top: 50%;
 cursor: pointer;
 }

 .pre{
 left: 0;
 }
 .next{
 right: 0;
 }
.bottom{
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 20px;
 text-align: center;
}

 .pointContainer{
 height: 20px;
 }

 .point{
 display: inline-block;
 border: 5px solid #eeeeee;
 border-radius: 5px;
 line-height: 0;
 margin-right: 3px;
 }

 .active{
 border: 5px solid #42b983;
 }

</style>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please Follow PHP Chinese website!

Related recommendations:

VUE 3D carousel chart encapsulation implementation method

Analyze two aspects of simulated data in vue-cli A method

The above is the detailed content of About how to use the vue.js carousel component. For more information, please follow other related articles on the PHP Chinese website!