vue use plug-ins do Carousel Figure

Use vue vue-awesome-swiper produced carousel FIG.

1. Access github, search vue-awesome-swiper, view usage.

The first pit: github can not actually access.

Solution: refer to someone else https://www.cnblogs.com/Owen-ET/p/10868620.html

In fact, do not visit visit does not matter, according to the following steps on it.

2. Install vue-awesome-swiper specified version

The second pit: You must use this version, the back or else a lot of bug.

npm i  [email protected] --save

3. In the component folder New Swipe.vuer components, and then paste the code below:

<template>
  <div>
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in picList" :key="i"><img :src="item.src"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div > 
</ Template > 
< Script > 
Export default { 
  name: " Swiper " , // here Swiper can not be used as a name, or error 
  Data () {
     return { 
      swiperOptions: { 
        the pagination: " .swiper-the pagination " , // FIG rotation point 
        loop: to true , // cycle 
      }, 
      picList: [ 
          {ID: 0 , the src: ' https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png'},
          {id:1,src:'https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg'}
      ]
    };
  }
};
</script>

/ * Image% 100 * / 
.swiper Slide-IMG { 
    width : 100% ; 
}

Parent component introduced Swipe.vue

The third pit: this new Swiper.vue's name can not be called Swiper! ! ! ! ! Called something else, like, HomeSwiper

Otherwise it will report the following error:

4. At this time, the rotation is already possible to slide the slide. Very happy yet. Then you slide to slide, when actually found that there are a warning.

The fourth pit: slide to slide and found the following error

Solution: Add the following in App.vue in style.

/ * Solve Carousel slide FIG error * / 
* { Touch-Action : none ;}

5. FIG appear on the rotation point, the default is blue to white to look better.

The fifth pit: Direct set to white is not acceptable. . .

Solution:

<style lang="css" scoped>
 
.wrapper >>> .swiper-pagination-bullet-active{
    background-color: #fff !important;
}
</style>

effect:

Complete code:

Swiper.vue

<template>
  <div>
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in picList" :key="i"><img :src="item.src"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div > 
</ Template > 
< Script > 
Export default { 
  name: " HomeSwiper " , // here not Swiper as name, error or 
  Data () {
     return { 
      swiperOptions: { 
        the pagination: " .swiper-the pagination " , // wheel FIG multicast point 
        loop: to true , // cycle 
      }, 
      picList: [ 
          {ID: 0 , the src: ' https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png'},
          {id:1,src:'https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg'}
      ]
    };
  }
};
</script>
<style lang="css" scoped>
 
.wrapper >>> .swiper-pagination-bullet-active{
    background-color: #fff;
}
/* 图片100% */
.swiper-slide img {
    width: 100%;
}
</style>

App.vue

< Style > 
/ * solve Carousel slide FIG error * / 
* { Touch-Action : none ; }  
</ style >

vue use plug-ins do Carousel Figure

Guess you like