首先下载vue-awesome-swiper
cnpm install vue-awesome-swiper --save
在main.js中引入
import VueAwesomeSwiper from
'vue-awesome-swiper'
import
'swiper/dist/css/swiper.css'
Vue.
use(VueAwesomeSwiper
)
html中
//绑定options定义轮播名字
<
swiper :options=
"swiperOption">
<swiper-slide v-for=
"(item,index) in list" :key=
"index" >
<div><img class=
'swiper-img' :src=
"item.picUrl"alt=
""></div>
</swiper-slide>
//分页
<div class=
"swiper-pagination" slot=
"pagination"></div>
</swiper>
script
data(){
return{
swiperOption: {
autoplay: {
delay: 1000
},
pagination: {
el: '.swiper-pagination',
clickable: true //允许分页点击跳转
},
},
}
},
