參考：
github地址：https://github.com/surmon-china/vue-awesome-swiper
1.安裝包：vue-awesome-swiper
npm install vue-awesome-swiper@3.1.1 --save-dev
注意淋叶，我最開(kāi)始安裝的是 vue-awesome-swiper最新版本4.11，但是在ios10上有輪播圖不輪播的兼容性bug爸吮，為了解決這個(gè)問(wèn)題，所以安裝了比較舊3.1.1版本形娇。
2.在main.js中引入如下內(nèi)容：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
3.在組件中使用：
<swiper ref="mySwiper" :options="swiperOption">
<swiper-slide>
<img :src="bannerImage[0]" alt="pic" />
</swiper-slide>
<swiper-slide>
<img @click="goToUrl()" :src="bannerImage[1]" alt="pic" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
data() {
return {
bannerImage: '',
swiperOption: {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
paginationClickable: true,
observer: true, // 修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
observeParents: true, // 修改swiper的父元素時(shí)桐早，自動(dòng)初始化swiper
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
scrollbar: '.swiper-scrollbar',
speed: 300,
bannerUrl: '',
},
}
},
autoplay：是否自動(dòng)播放，其中的delay是每個(gè)圖片展示時(shí)長(zhǎng)哄酝。
speed：切換速度友存。
pagination：輪播圖上的小圓圈陶衅，注意如果不寫(xiě)clickable: true，小圓圈展示不出來(lái)搀军。
loop：是否循環(huán)播放膨俐。注意，如果添加了循環(huán)參數(shù)loop為true焚刺，則會(huì)有點(diǎn)擊第一張圖片不能跳轉(zhuǎn)到指定連接的bug。
bannerImage=['/static/images/test.jpg', '/static/images/test.jpg']乳愉，static是vue框架中的目錄兄淫。
