微信小程序使用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
  })
 },
})