微信小程序轮播中间大两边小

wxml：

<!--  轮播图  -->
  <view class="swiper">
    <swiper 
      autoplay="{{autoplay}}" previous-margin="{{previousMargin}}" next-margin="{{nextMargin}}"  circular="true" interval="{{interval}}" duration="{{duration}}" bindchange="handleChange">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item class="swiper-items">
          <view class="swiper-item {{currentIndex !== index ? 'active':''}}"><image src="{{item}}"></image></view>
        </swiper-item>
      </block>
    </swiper>
  </view>

 

js:

data:{
    background:[],
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500,
    previousMargin:'50rpx',
    nextMargin:'50rpx',
    currentIndex: 0
},
handleChange: function (e) {
        this.setData({
      currentIndex: e.detail.current
    })
  },

wxss:

/*轮播图*/
.swiper{
  padding: 20rpx 0;
  position: relative;
  /* height: 400rpx; */
  background: #f0f3f5;
}
.swiper swiper{
  height: 400rpx !important;
}
.swiper-items{
  height: 400rpx !important;
}
.swiper .swiper-item{
  height: 400rpx;
  margin: 0 10rpx !important;
  border-radius: 15rpx;
}
.swiper .active{
  height: 370rpx;
  margin: 20rpx 10rpx 0 !important;
  border-radius: 10rpx;
  transition: all 0.2s ease-in 0s;
}
.swiper .swiper-item image{
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.swiper .active image{
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

 

来源：CSDN

作者：前端小白-

链接：https://blog.csdn.net/luojian641232999/article/details/103599467