Detailed explanation of how to use the carousel diagram component

I have written a carousel component in jQuery before, and used jquery animation to achieve the image sliding effect. The sliding effects of this component are implemented by native JS and vue data binding, and do not rely on other libraries. Although swiper can be introduced, the biggest disadvantage of introducing class libraries is that there is too much redundant code, so it is better to write one by yourself, which is simple and concise. (PS: There are some small bugs in the width and height settings of the component. You need to change the width and height of the container in the subcomponent to use js to dynamically modify the width and height of the container. In addition, there may be unreasonable points in other places. Everyone is welcome to criticize and correct me)

Github address:git@:cainiao222/

Parent component code:

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

</template>

<script>
// import swiper from 'swiper'

 import slider from './'


 export default {

 data(){
 return {
 img:[{src:require('../assets/slideShow/'),name:'hehe1'},
  {src:require('../assets/slideShow/'),name:'hehe2'},
  {src:require('../assets/slideShow/'),name:'hehe3'},
  {src:require('../assets/slideShow/'),name:'hehe4'}
 ],
 width:460,
 height:250
 }
 },

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

Subcomponent code:

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

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

 mounted(){
 ();
 },

 data(){
 ();
 return{
 length:new Array(),
 nowIndex:0,
 wrap_width:*(+2),
 wrap_height:,
 offset_left:-,
 isTransition:true,
 timer:null,
 animateFlag:true,
 timerAuto:null
 }
 },
 computed:{
 slider_des:function () {
 var arr=[];
 var arr1=();
 ([0]);
 ([-1]);
 return arr1;
 }
 },
 methods:{
 pre(){
 if(===0){
  if(!){
  clearInterval();
  =true;
  this.offset_left=-()*;
  }
  (-,0,function (that) {
  that.offset_left=-()*;
  });
  =-1;
  return
 }else{
  if(!){
  =true;
  clearInterval();
  this.offset_left=-(*);
  }
  (-(+1)*,-(*));
 }
 -=1;
 },
 startInterval(){
 =setInterval(,2000);
 },
 endInterval(){
// ("leave");
 clearInterval();
 },
 next(){
 if(===-1){
  if(!){
  =true;
  clearInterval();
  this.offset_left=-;
  }
  (-()*,-(+1)*,function (that) {
  that.offset_left=-;
  });
  =0;
  return
 }else{
  if(!){
  =true;
  clearInterval();
  this.offset_left=-(+2)*;
  }
  (-(+1)*,-(+2)*);
  +=1;
 }
 },
 animate(start,end,fuc){
 var distance=end-start;
 var pre_dis=distance/50;
 var that=this;
 =setInterval(function () {
  =false;
  if((end-that.offset_left)<=(pre_dis)){
  that.offset_left=end;
  if(fuc){
  fuc(that);
  }
  =true;
  clearInterval();
  =null;
  return
  }
  that.offset_left+=pre_dis;
 },1);
 },
 changeIndex(index){
 clearInterval();
 (-(+1)*,-(index+1)*);
 =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 all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.