微信小程序：创意轮播图swiper

卡片式轮播图的简单实现如图所示：

效果图

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