一、安装
npm install vue-awesome-swiper
二、在main.js中引入swiper.css
import "swiper/dist/css/swiper.css"
三、在需要的页面引入vue-awesome-swiper并注册
import { swiper, swiperSlide } from "vue-awesome-swiper"
其中：
1.swiper:充当要要滚动的外层div
2.swiperSlide：充当每个要轮播的项
四、注册组件
components:{
swiper,
swiperSlide
}
五、具体样式
详见GitHub（搜索vue-awesome-swiper）
例如：
swiper参数进行配置
1、在.vue组件中的data() {}中进行配置，添加
data() {
return {
setOption:{
pagination:".swiper-pagination",
autoplay:3000,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop:true
//需要用哪个配置哪个
}
}
}
2、将setOption添加到swiper指令中
<swiper :options='setOption' class='swiper-box'>
<swiper-slide></swiper-slide>
<swiper-slide></swiper-slide>
<swiper-slide></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>
