小程序卡片轮播效果

如图上效果：

实现代码如下：

index.wxml

index.wxss

page{
  background: #f1f1f1;
}
.imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
}
.item{
  height: 500rpx;
}
.itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
}
.active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
}

.swiperContainer{
  width: 100%;
  min-height: 502rpx;
}
.swiperitem{
  height: 460rpx;
}
.swiperItemImgs{
  position: absolute;
  width: 100%;
  height: 460rpx;
  box-sizing: border-box;
}
.swiperitemImg0{
  padding-right: 30rpx;
}
.swiperitemImg1{
  padding: 0 30rpx;
}
.swiperitemImg2{
  padding-left: 30rpx;
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0,
    swiperIndex: 0
  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
  swiperChange: function (e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  },
  /**生命周期函数--监听页面加载*/
  onLoad: function (options) {

  }
})