小程式自定義swiper的指示點樣式及顏色

1
圖居中、圓邊角、指示點顏色更改、指示點樣式更改

下圖是樣式不好看的元件

要修改成這樣：：

wxml:

<swiper class="bd" indicator-dots="{{true}}" indicator-active-color="#ff8f00" autoplay="{{true}}" interval ="5000" duration="500">
<swiper-item>
<view class='lbtp'><image src='/images/bannar/lbt1.jpg'></image></view>
</swiper-item>
<swiper-item>
<view class='lbtp'><image src='/images/bannar/lbt2.jpg'></image></view>
</swiper-item>
</swiper>

/*輪播圖指示點*/
.bd .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 2rpx;
}
.bd .wx-swiper-dot{
width:40rpx;/*點的長*/
display: inline-flex;
height: 10rpx; /*點的高*/
margin-left: 5rpx; /*兩個點的距離*/
justify-content:space-between;
}
.bd .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background : #d7d7d7; /*點的未選中顏色*/
border-radius: 8rpx
}
.bd .wx-swiper-dot-active::before{
background:#ff8f00; /*點的選中顏色*/
}