第一步
cnpm install vue-awesome-swiper@3 --save
因為版本不兼容的問題休蟹，這里指定下載的版本是3.xxx。第一次下載的時候可以先不指定，等到輪播圖沒有結果時再重新指定版本下載窃诉。
下載完成之后，要先將swiper.css 和swiper.js放到自己的項目文件夾下宣脉，這兩個文件的存放位置在 dist --> css -->swiper.css / dist --> js -->swiper.js
第二步
<swiper ref="mySwiper" :options="swiperOptions" class="lunbobox" >
? ? ? ? ? ? ? <swiper-slide class="swimg" ><img src="../assets/images/pro/imgpro1.png" /></swiper-slide>
? ? ? ? ? ? ? <swiper-slide class="swimg"><img src="../assets/images/pro/imgpro1.png" /></swiper-slide>
? ? ? ? ? ? ? <swiper-slide class="swimg"><img src="../assets/images/pro/imgpro1.png" /></swiper-slide>
? ? ? ? ? ? ? <swiper-slide class="swimg"><img src="../assets/images/pro/imgpro1.png" /></swiper-slide>
? ? ? ? ? ? ? <!-- 指示點 -->
? ? ? ? ? ? ? <div class="swiper-pagination"? slot="pagination"></div>
? ? ? ? ? ? ? <!-- 左右導航欄 -->
? ? ? ? ? ? ? <div class="swiper-button-prev" slot="button-prev"></div>
? ? ? ? ? ? ? <div class="swiper-button-next" slot="button-next"></div>
? ? ? ? </swiper>
第三步
? export default {
? ? components: {
? ? ? swiper,
? ? ? swiperSlide
? ? },
? ? data() {
? ? ? return {
? ? ? ? swiperOption: {
? ? ? ? ? pagination: '.swiper-pagination1',
? ? ? ? ? slidesPerView: 1,
? ? ? ? ? spaceBetween: 30,
? ? ? ? ? centeredSlides: false,
? ? ? ? ? spaceBetween: 0,
? ? ? ? ? onSlideChangeEnd: swiper => {
? ? ? ? ? ? //放swiper的回調(diào)方法
? ? ? ? ? ? this.page = swiper.realIndex+1;
? ? ? ? ? ? this.index = swiper.realIndex;
? ? ? ? ? },
? ? ? ? ? //左右導航欄
? ? ? ? ? navigation: {
? ? ? ? ? ? nextEl: '.swiper-button-next',
? ? ? ? ? ? prevEl: '.swiper-button-prev',
? ? ? ? ? },
? ? ? ? ? //自動播放
? ? ? ? ? autoplay:{
? ? ? ? ? ? delay:2000,
? ? ? ? ? ? disableOnInteraction:false
? ? ? ? ? },
? ? ? ? ? //指示點
? ? ? ? ? pagination: {
? ? ? ? ? ? el: '.swiper-pagination',
? ? ? ? ? ? clickable: true,
? ? ? ? ? },
? ? ? ? ? //循環(huán)
? ? ? ? ? loop:true
? ? ? ? }
? ? ? }
? ? },
? ? //定義swiper對象
? ? computed: {
? ? ? swiper() {
? ? ? ? return this.$refs.mySwiper.swiper;
? ? ? }
? ? },
? ? //當Vue時實例被掛載時，調(diào)用slideTo方法
? ? mounted () {
? ? ? this.swiper.slideTo(0, 0, false);
? ? }
? }
第四步?在入口函數(shù)引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import './assets/css/index/swiper.css'
Vue.use(VueAwesomeSwiper)
可能出現(xiàn)的問題
1?出現(xiàn)左右箭頭點擊失效的情況
解決辦法：
npm uninstall?vue-awesome-swiper --save
npm install?vue-awesome-swiper@3.1.3 --save
安裝完3.1.3的版本后吹菱，重新啟動查看就解決了
其他：提供官網(wǎng)?https://www.swiper.com.cn/api/index.html
