小程序swiper自定义指示点样式

  <view class="swiperContainer">
    <swiper autoplay="{{autoplay}}" indicator-dots="true" interval="5000" duration="500" style='height: 750rpx;'>
      <block wx:for='{{goods_image}}' wx:key='index'>
        <swiper-item>
          <image src='{{item}}' mode='aspectFill'></image>
        </swiper-item>
      </block>
    </swiper>
  </view>

  data: {
    "goods_image": [
      "https://9de17dff33.jpg",
      "https://44cddfd2f7924.jpg",
      "https://f30c02c9e.jpg",
      "https://e8023d1ca630.jpg",
      "https://7e7f0127.jpg"
    ],
  },

/* banner */
.swiperContainer {position: relative;}
.swiperContainer image{width: 100%;height: 100%;}
/* 指示点容器样式 */
.swiperContainer .wx-swiper-dots{}
/* 水平滑动的指示点容器样式，其在.wx-swiper-dots内。 */
.swiperContainer .wx-swiper-dots-horizontal{}
/* ：指示点样式 */
.swiperContainer .wx-swiper-dot{}
/* 当前指示点样式 */
.swiperContainer .wx-swiper-dot-active{width: 100rpx;border-radius: 50rpx;}