(vue2.0)vue-awesome-swiper(v3.1.3)的初级使用

1. npm install

npm install vue-awesome-swiper@2.6.7 --save
// 或者
npm install vue-awesome-swiper --save

2. 引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

3. 代码部分

<swiper :options="swiperOption" >
   <swiper-slide><img src="https://ke-xxx.oss-cn-hangzhou.aliyuncs.com/profilePhoto/em1.png"></swiper-slide>
   <swiper-slide><img src="https://ke-xxx.oss-cn-hangzhou.aliyuncs.com/profilePhoto/em2.png"></swiper-slide>
   <swiper-slide><img src="https://ke-xxx.oss-cn-hangzhou.aliyuncs.com/profilePhoto/em3.png"></swiper-slide>
   <swiper-slide><img src="https://ke-xxx.oss-cn-hangzhou.aliyuncs.com/profilePhoto/em4.png"></swiper-slide>
   <swiper-slide><img src="https://ke-xxx.oss-cn-hangzhou.aliyuncs.com/profilePhoto/em5.png"></swiper-slide>
   <div class="swiper-button-next" slot="button-next"></div>
   <div class="swiper-button-prev" slot="button-prev"></div>
 </swiper>

4. 配置项

data() {
   return {
     swiperOption: {//swiper3
       autoplay: false,
       speed: 1000,
       slidesPerView : 3,
       centeredSlides: false,
       navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
       },
     }
   };
 },

5. 初级预览
   

能在VUE中使用就是这些步骤了,后面的就是定制了. ?