微信小程序 图片轮播特效 左右图小中间大效果

WXXML

<view class="box">
  <view>
    <swiper class="swiper" next-margin="75rpx" previous-margin="75rpx" current="{{currentItemId}}" bindchange="swiperChange"   circular>
      <block wx:for="{{expert_list}}" wx:for-item="item" wx:for-index="index" wx:key>
        <swiper-item item-id="{{index}}" data-item-id="{{index}}" bindtap='clickChange'>
          <view class='row'>
            
            <view class='col {{currentItemId == index ? "selected" : ""}}'>
              <image src="{{item.img}}"> </image>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <view class="dots"> 
      <block wx:for="{{expert_list}}" wx:key="unique"> 
        <view class="dot{{index == currentItemId ? ' active' : ''}}"></view> 
      </block> 
    </view>
  </view>
</view>

WXSS

.swiper {
  height: 420rpx;
}

.row {
  width: 600rpx;
  height: 360rpx;
  margin: 0 auto;
  background: transparent;

}
/* .col.selected { box-shadow:3rpx 2rpx 10rpx 4rpx #cccfd1;} */

.col {
  width: 600rpx;
  margin: 0 auto;
  height: 100%;
  transform: scale(0.9);
  border-radius: 10rpx;
  text-align: center;
  transition: all 0.5s;
  
}

.col image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.selected {
  transform: scale(1);
  /* box-shadow: 0px 0px 20rpx 5rpx #CCC; */
  
}

.swiper-box {
  position: relative;
  width: 100%;
}

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0rpx;
  display: flex;
  justify-content: center;
}

.dots .dot {
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #aaa;
  border-radius: 8rpx;
  transition: all 0.6s;
}

.dots .dot.active {
  width: 24rpx;
  background: #f80;
}

JS

data: {
    currentItemId: 1,//默认开始显示第几章轮播图，0为第一张开始
    expert_list: [{

        img: 'https://btaotao-1255753702.cos.ap-guangzhou.myqcloud.com/ins-xcx/1.jpg',
      }, {

        img: 'https://btaotao-1255753702.cos.ap-guangzhou.myqcloud.com/ins-xcx/2.jpg',
      }, {

        img: 'https://btaotao-1255753702.cos.ap-guangzhou.myqcloud.com/ins-xcx/3.jpg',
      }, {

        img: 'https://btaotao-1255753702.cos.ap-guangzhou.myqcloud.com/ins-xcx/4.jpg',
      }, {

        img: 'https://btaotao-1255753702.cos.ap-guangzhou.myqcloud.com/ins-xcx/5.jpg',
      }
    ],

  },

  stopTouchMove: function() {
    return false;
    },
    swiperChange: function (e) {
      var currentItemId = e.detail.currentItemId;
      this.setData({
        currentItemId: currentItemId
      })
    },
  
    clickChange: function (e) {
      var itemId = e.currentTarget.dataset.itemId;
      this.setData({
        currentItemId: itemId
      })
    },