微信小程序使用swiper组件实现层叠轮播图

<view class="banner-swiper">
  <swiper indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" current='{{swipercurrent}}' 
indicator-color="{{beforecolor}}" indicator-active-color="{{aftercolor}}" circular='{{circular}}' 
previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperchange" >
    <block wx:for="{{arr}}" wx:key="key"> 
     <swiper-item>
      <image src="{{item.images}}" class="slide-image{{index == swipercurrent ? ' active' : ''}}" 
bindchange="chuangevent" id="{{index}}"></image>
     </swiper-item>
    </block> 
  </swiper>
 </view> 

.banner-swiper {
 width: 100%;
 height: 500rpx;
 overflow: hidden;
}

swiper {
 display: block;
 height: 500rpx;
 position: relative;
}

.slide-image {
 width: 96%;
 display: block;
 margin: 0 auto;
 height: 450rpx;
 margin-top:25rpx;
}
.active{
 margin-top:0rpx;
 height: 500rpx;
}

page({
 data: {
  //轮播图
  swipercurrent:1,
  arr: [{
   images: 'images/1.jpg'
  },
  {
   images: 'images/5.jpg'
  },
  {
   images: 'images/3.jpg'
  },
  {
   images: 'images/4.jpg'
  }
  ]
  indicatordots: true,
  autoplay: true,
  interval: 2000,
  duration: 1000,
  circular: true,
  beforecolor: "white",//指示点颜色 
  aftercolor: "coral",//当前选中的指示点颜色 
  previousmargin:'30px',//前边距
  nextmargin:'30px',//后边距
  
 },
 
 //轮播图的切换事件 
 swiperchange: function (e) {
  console.log(e.detail.current);
  this.setdata({
   swipercurrent: e.detail.current  //获取当前轮播图片的下标
  })
 },
 //滑动图片切换 
 chuangevent: function (e) { 
  this.setdata({
   swipercurrent: e.currenttarget.id
  })
 },
})