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

image.png

//wxml

    
      
        
          
            
          
        
      
    
  

//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;
}

看完点个赞呗