Vue.use(window.VueAwesomeSwiper);
var swiperimgList = {
imgUrl:'https://img10.360buyimg.com/imgzone/jfs/t1/152272/31/17250/44877/601be6e8E072655e0/0724372cf833e1e1.png',
imgUrl:'https://img10.360buyimg.com/imgzone/jfs/t1/152272/31/17250/44877/601be6e8E072655e0/0724372cf833e1e1.png',
imgUrl:'https://img10.360buyimg.com/imgzone/jfs/t1/152272/31/17250/44877/601be6e8E072655e0/0724372cf833e1e1.png',
imgUrl:'https://img10.360buyimg.com/imgzone/jfs/t1/158562/27/5978/35966/601be6e8E21e668ad/249f5ff432f1adf4.png',
imgUrl:'https://img10.360buyimg.com/imgzone/jfs/t1/152272/31/17250/44877/601be6e8E072655e0/0724372cf833e1e1.png',
imgUrl:'https://img10.360buyimg.com/imgzone/jfs/t1/161568/34/5615/35705/601be6e8Eb0d97457/6ac965e01c0898fc.png',
imgUrl:'https://img10.360buyimg.com/imgzone/jfs/t1/167485/17/5499/31842/601be6e8Ed8a1336c/96f283da138a0569.png',
};
/*轮播*/
var swiperOption = {
speed: 2000,
loop: true,
autoplay: true,//等同于以下设置
autoplay: {
delay: 1000,
stopOnLastSlide: true,
disableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
},
spaceBetween: 20,
slidesPerView: 2,//显示滑动页面显示几个图
// centeredSlides: true,
};
<body>
<div>
<swiper :options="swiperOption" class="prizeTo">
<swiper-slide class="col-center" v-for="(item,index) in swiperimgList">
<div :id="index" class="circle" :style="{'background-image':'url('+item.imgUrl+')'}"></div>
</swiper-slide>
</swiper>
</div>
</body>
.prizeTo {
width: 100%;
height: 255px;
margin-top: 0.4rem;
}
.col-center {
height: 255px;
display: flex;
align-items: center;
}
.col-center .circle{
width: 3.14rem;
height: 4.07rem;
background-size: contain;
background-repeat:no-repeat;
}