微信小程序修改原生swiper轮播点的样式

wxml

<swiper indicator-dots='true' indicator-active-color='#ffffff' indicator-color='rgba(255,255,255,0.5)'  autoplay='true' class="banner">
    <swiper-item>
      <image src='/images/ban1.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/ban2.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/ban3.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/ban4.jpg'></image>
    </swiper-item>
  </swiper>

wxss

.banner .wx-swiper-dot {
  width: 20rpx;
  height: 8rpx;
  border-radius: 8px;
  opacity: 0.5;
 }
 .banner .wx-swiper-dot-active {
  width: 30rpx;
  height: 8rpx;
  background-color: #fff;
  border-radius: 8rpx;
  opacity: 1;
 }