安装:npm install vue-awesome-swiper --save
注册:
Main.js:
import VueSwiper from 'vue-awesome-swiper';
Vue.use(VueSwiper);
使用:
Header.vue
<template>
<swiper :options="swiperOption"> //vue组件标签
<swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
<swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
<swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
</swiper>
</template>
<script type="text/ecmascript-6">
import{ swiper,swiperSlide } from'vue-awesome-swiper';
调用swiper
require('swiper/dist/css/swiper.css');
调用 swiper.css
export default{
components: { 组件注册
swiper,
swiperSlide
},
data() {
return{
swiperOption: { swiperOption是上面的options值
loop:true,
autoplay:3000,
autoplayDisableOnInteraction:false
}
};
}
};
</script>