第一步安装
npm install vue-awesome-swiper --save
第二部在main.js中引入
import Vue from ‘vue‘
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
Vue.use(VueAwesomeSwiper)
在组件中使用插件
<swiper :options="swiperOption" ref="mySwiper">
<!-- 这部分放你要渲染的那些内容 -->
<swiper-slide v-for="item in items">
<img :src="item" class="index_img">
</swiper-slide>
<!-- 这是轮播的小圆点 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
import { swiper, swiperSlide } from ‘vue-awesome-swiper‘
export default{
name:‘index‘,
components: {
swiper,
swiperSlide
},
data() {
return {
items:[‘../static/bg4.jpg‘,‘../static/bg5.jpg‘,‘../static/bg7.jpg‘],
swiperOption: {
pagination: ‘.swiper-pagination‘,
slidesPerView: ‘auto‘,
centeredSlides: true,
paginationClickable: true,
onSlideChangeEnd: swiper => {
//这个位置放swiper的回调方法
this.page = swiper.realIndex+1;
this.index = swiper.realIndex;
},
},
swiperSlides: [1, 2, 3, 4, 5]
}
},
//定义这个sweiper对象
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted () {
//这边就可以使用swiper这个对象去使用swiper官网中的那些方法
//this.swiper.slideTo(0, 0, false);
}
}
