1、使用npm下载vue-awesome-swiper
npm install vue-awesome-swiper --save
2、在main.js中引用
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'(css需要单独引用)
3、在组件中使用
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
html代码:
<swiper :options="swiperOption">
<swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide>
</swiper>
javascript代码:
export default {
name: '',
data () {
return {
swiperOption:{
slidesPerView: 'auto',
centeredSlides:true,
spaceBetween: 10,
loop:true,
speed:600, //config参数同swiper4,与官网一致
}
}
},
components: {
swiper,
swiperSlide
}
}