卡片式轮播图的简单实现如图所示：
效果图
wxml:
<swiper next-margin="80rpx" previous-margin="80rpx" circular="true" bindchange="swiperChange">
<swiper-item wx:for="{{3}}">
<view class="{{cur==index?'now':'next'}}">
<image src="https://s1.ax1x.com/2020/05/12/YNKurT.jpg" />
</view>
</swiper-item>
</swiper>
为了方便演示，轮播三张一样的图片。
代码解释：
previous-margin：前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin：后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
circular:是否采用衔接滑动
bindchange:current 改变时会触发 change 事件
class="{{cur==index?'now':'next'}}"：每个图片有一个编号cur(由js代码写入)。某个图片处于轮播位置时，其大小由now决定，其他还未轮播的图片大小由next决定。
wxss：
/* 图片大小 */
swiper swiper-item view image
{
width: 550rpx;
height: 300rpx;
border-radius: 20rpx;
}
/* 让轮播图居中 */
swiper swiper-item view{
display: flex;
justify-content: center
}
/* 当前播放图片的大小 */
.now{
transform: scaleY(1)
}
/* 未播放图片的大小 */
.next{
transform: scaleY(0.9);
}
代码解释：
transform: scaleY(x)表示大小为原来的x倍。
js：
Page({
data: {
cur:0,
},
swiperChange: function (e) {
console.log(e)
this.setData({
cur: e.detail.current
})
},
})
代码解释：
e.detail.current：当前轮播图片的编号，将其赋值给cur
