1.npm安装
npm install vue-awesome-swiper --save
2.vue 引入
//在main.js 中全局引入 import VueAwesomeSwiper from "vue-awesome-swiper"; import 'swiper/dist/css/swiper.css'; Vue.use(VueAwesomeSwiper);
3.运用
<swiper :options="swiperOptions">
<swiper-slide>1</swiper-slide>
<swiper-slide>2</swiper-slide>
<swiper-slide>3</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{
data(){
return{
swiperOptions:{
slidesPerView:3,
spaceBetween:30,
freeMode:true,
pagination:{
el:".swiper-pagination",
clickable:true
},
navigation:{
nextEl:".swiper-button-next",
prevEl:".swiper-button-prev"
}
}
}
}
}