1.首先通过npm安装vue-awesome-swiper,我在项目中用的是2.6.7版本
npm install [email protected] –save
2. 在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3.实现轮播图
-
<template>
-
<div class="wrapper">
-
<swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper" >
-
<!-- slides -->
-
<swiper-slide v-for="item of list" :key="item.id">
-
<img class="swiper-img" :src="item.imgUrl"/>
-
</swiper-slide>
-
<div class="swiper-pagination" slot="pagination"></div>
-
</swiper>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:"HomeSwiper",
-
props:{
-
list:Array
-
},
-
data (){
-
return{
-
swiperOption:{
-
pagination:".swiper-pagination",
-
autoplay: 2000,
-
loop:true,
-
paginationClickable: true,
-
observer:true,
-
observeParents:true
-
}
-
-
}
-
} ,
-
computed: {
-
showSwiper () {
-
return this.list.length
-
}
-
}
-
}
-
-
</script>
-
-
<style lang="stylus" scoped>
-
.wrapper >>> .swiper-pagination-bullet-active
-
background:#fff
-
.wrapper
-
overflow:hidden
-
width:100%
-
height 0
-
padding-bottom:31.25%
-
background:#eee
-
.swiper-img
-
width:100%
-
</style>