wxss

/* 轮播圆点样式修改 */
.swiper-box{
  position: relative;
  width: 100%;
}
.dots{ 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 20rpx; 
  display: flex; 
  justify-content: center; 
} 
.dots .dot{ 
  margin: 0 8rpx; 
  width: 14rpx; 
  height: 14rpx; 
  background: #fff; 
  border-radius: 8rpx; 
  transition: all .6s; 
} 
.dots .dot.active{ 
  width: 24rpx; 
  background: #fff; 
}
 
swiper image {
  width: 100%;
  height: 100%;
}

wxml

<view class='swiper-box'>
        <swiper   autoplay="true" interval="{{interval}}" duration="{{duration}}"  
        circular="true" current="{{swiperCurrent}}"  bindchange="swiperChange">
            <block wx:for="{{imgUrls}}" wx:key="{{index}}">
                <swiper-item>
                    <image src="{{item}}" class="slide-image" width="100%"/>
                </swiper-item>
            </block>

        </swiper>

      <view class="dots"> 
          <block wx:for="{{imgUrls}}" wx:key="unique" > 
            <view class="dot {{index == swiperCurrent  ? 'active' : ''}}"></view> 
          </block> 
        </view>
    </view>

js

data: {
    imgUrls: [
      '/image/u25.png',
      '/image/u27.png',
      '/image/u29.png',
    ],
    swiperCurrent:0,
    autoplay: false,
    interval: 3000,
    duration: 800,
  },
  //轮播图的切换事件  
  swiperChange: function (e) {
    // console.log(e);
    this.setData({
      swiperCurrent: e.detail.current   //获取当前轮播图片的下标
    })
  },

image.png