小程序自定义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; /*点的选中颜色*/
}