1、引入
import Swiper from 'swiper'
@import '../../common/css/swiper.css';
2、布局
<div class="swiper-container">
<div class="swiper-wrapper">
<div v-for='(i,index) in arrItem' :key='index' class="swiper-slide">
<div class="iSlide">
<img class="img" :src="i.imgUrl">
</div>
</div>
</div>
</div>
3、实例化
export default{
mounted:function(){
var mySwiper = new Swiper('.swiper-container', {
})
},
data(){
return {
arrItem:[
{
name:'swiperSlide5',
imgUrl:'http://pic.58pic.com/58pic/13/60/16/64b58PICXEK_1024.jpg'
},
{
name:'swiperSlide1',
imgUrl:'http://image.qmango.com/hotelimg/dl1210/109490/109.jpeg'
},
{
name:'swiperSlide51',
imgUrl:'http://image.qmango.com/hotelimg/dl1210/125708/181.jpeg'
},
{
name:'swiperSlide1111115',
imgUrl:'http://image.qmango.com/hotelimg/dl1210/119297/793.jpeg'
}
]
}
}
}