微信小程序轮播图

轮播图中间大两边小/指示点样式

效果图

轮播图中间大两边小

// wxml
<view class="bannerBox">
    <swiper class="banner" indicator-dots="true" autoplay="true" circular="true" previous-margin="20rpx" next-margin="20rpx" bindchange="yearSwiperChange">
      <block wx:for="{{banner}}" wx:key="*this" wx:index="{{index}}">
        <swiper-item>
          <image src="{{item}}" class="{{swiperCurrent == index ? 'active' : ''}}"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>

// wxss
.banner image {
  width: 100%;
  height: 210rpx;
  border-radius: 20rpx;
  background-color: #fff;
  box-shadow: 2rpx 4rpx 29rpx 0rpx rgba(0, 0, 0, 0.2);
}
.banner .active{
  height: 100%;
}

// js
//data
swiperCurrent: 0,
//轮播图切换
 yearSwiperChange(e) {
    let current = e.detail.current;
    let that = this;
    that.setData({
      swiperCurrent: current,
    })
  }

指示点样式

/* 指示点样式 */
.banner .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 2rpx;
}

.banner .wx-swiper-dot {
  width: 29rpx;
  display: inline-flex;
  height: 4rpx;
  margin-left: 10rpx;
  justify-content: space-between;
  border-radius: 2rpx;
}

.banner .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: #d68c91;
}

.banner .wx-swiper-dot-active::before {
  background: #af1b40;
}