wx小程序-swiper显示上一张下一张压边且无缝轮播

特点1：扩展左右滑动两边各显示一半其它的item

特点2：无缝轮播：在swiper中加circular属性即可

效果：

swiper1

siwper2

index.wxml

index.wxss

.banner {
    width: 100%;
    height: 306rpx;
    background-color: #ffffff;
}

.banner .back {
    width: 670rpx;
    height: 306rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner .back image {
    width: 670rpx;
    height: 306rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
}

.banner {
width: 100%;
height: 306rpx;
background-color: #ffffff;
}

.banner .back {
width: 670rpx;
height: 306rpx;
display: flex;
justify-content: center;
align-items: center;
}

.banner .back image {
width: 670rpx;
height: 306rpx;
margin-left: 10rpx;
margin-right: 10rpx;
}

另外补：banner json

"banner":[
{
"id":1,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/a46277ace4994ff4bfdaf19f5ddffc3b.jpg",
},
{
"id":2,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/5b436bf4687c4129b92cddfd2ab13f8e.jpg",
},
{
"id":3,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/330957b2ce914329a5bc3cbffb9ffcb2.jpg",

}
],

"banner":[
{
"id":1,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/a46277ace4994ff4bfdaf19f5ddffc3b.jpg",
},
{
"id":2,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/5b436bf4687c4129b92cddfd2ab13f8e.jpg",
},
{
"id":3,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/330957b2ce914329a5bc3cbffb9ffcb2.jpg",

}
],