安装命令：
npm install --save swipernpm install --save vue-awesome-swiper
<template>
<div class="banner">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>
<img src="../../static/img/banner.png" class="index_img">
</swiper-slide>
<swiper-slide>
<img src="../../static/img/banner.png" class="index_img">
</swiper-slide>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.min.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
name:'index',
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
autoplay:true,
loop:true
},
}
},
//定义这个sweiper对象
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
}
}
</script>
<style lang="less">
.banner img{
display: block;
width: 100%;
height: auto;
}
</style>
