小程序丨swiper輪播組件樣式修改

<swiper class="swiper-box" indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key='{{index}}'>
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>   wxml直接使用原生的就可以

　wxss里面：

.swiper-box{
  height: 456rpx;
}
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;  
}
圓點的樣式
.swiper-box .wx-swiper-dot{
    width:20rpx;
    display: inline-flex;
    height: 20rpx;
    margin-left: 6rpx;
    justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{
    content: '';
    flex-grow: 1; 
    background: rgba(255,255,255,0.8);
    border-radius: 10rpx;
}
.swiper-box .wx-swiper-dot-active::before{
    background:#ff6682;   
}