微信小程序：轮播图中间大两边小、中间放大高亮显示

//wxml
<view class="swiper-wrapper">
    <swiper 
      indicator-dots="{
   {true}}"
      indicator-color="rgba(221,0,34,.3)"
      indicator-active-color="#DD0022"
      autoplay="{
   {false}}" 
      interval="{
   {5000}}" 
      duration="{
   {500}}"
      current="{
   {posterList.length>2?1:0}}"
      previous-margin="96rpx"
      next-margin="96rpx"
      bindchange="swiperChange"
    >
      <block wx:for="{
   {posterList}}" wx:key="*this">
        <swiper-item>
          <view class="swiper-item {
   {currentIndex==index?'swiper-item-active':''}}">
            <image class="" src="{
   {item.image}}" mode="scaleToFill" />
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>

//js
data: {
    currentIndex: 0,
    posterList: [
      {
        id: '1', 
        image: 'https://mina.qn.woody.club/%E8%87%B3%E5%B0%8A%E5%8D%A11.png'
      },
      {
        id: '2', 
        image: 'https://mina.qn.woody.club/%E8%87%B3%E5%B0%8A%E5%8D%A12.png'
      },
      {
        id: '3', 
        image: 'https://mina.qn.woody.club/%E4%BA%B2%E5%AD%90%E5%8D%A11.png'
      },
      {
        id: '4', 
        image: 'https://mina.qn.woody.club/%E4%BA%B2%E5%AD%90%E5%8D%A12.png'
      },
    ]
  },
//函数
swiperChange(event){
    let {current} = event.detail;
    this.setData({
      currentIndex: current
    })
  },

 

//wxss
.swiper-wrapper{
  flex: 1;
  width: 750rpx;
  padding-top: 80rpx;
  margin: 0 auto;
}
swiper{
  width: 750rpx;
  height: 900rpx;
}

.swiper-item{
  height: 900rpx;
  display: flex;
  align-items: center;
}

.swiper-item image{
  width: 448rpx;
  height: 720rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  transition: all 0.6s;
}
.swiper-item-active image{
  width: 560rpx;
  height: 900rpx;
  transition: all 0.6s;
}