微信小程序使用previous-margin 与 next-margin 实现幻灯片轮播

先上一张效果图吧
注: 使用缩放的方式取巧方法

 

 

<swiper class="swiper-box" previous-margin="40px" next-margin="40px" current="{{active}}" bindchange="swiperChange">
  <swiper-item class="swiper-item" wx:for="{{banners}}">
    <view class="img-box {{active == index ? 'active' : ''}}">
      <image src="{{item.imgUrl}}"></image>
    </view>
  </swiper-item>
</swiper>

样式部分
 

.swiper-box {
  width: 100%;
	height: 829rpx;
}
.swiper-box .img-box {
  height: 100%;
  display: flex;
  justify-content: center;
}
.swiper-box .img-box image {
  width: 100%;
  height: 100%;
  border-radius: 24rpx;
  transform: scale(0.9);
  transition: all 0.4s;
}
.swiper-box .img-box.active image {
  transform: scale(1);
}