第一步
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的回调方法
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,
},
//循环
loop:true
}
}
},
//定义swiper对象
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
//当Vue时实例被挂载时，调用slideTo方法
mounted () {
this.swiper.slideTo(0, 0, false);
}
}
第四步 在入口函数引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import './assets/css/index/swiper.css'
Vue.use(VueAwesomeSwiper)
可能出现的问题
1 出现左右箭头点击失效的情况
解决办法：
npm uninstall vue-awesome-swiper --save
npm install vue-awesome-swiper@3.1.3 --save
安装完3.1.3的版本后，重新启动查看就解决了
其他：提供官网 https://www.swiper.com.cn/api/index.html
