微信小程序swiper设置图片圆角和指示形状改变

wxml:

<view class="swiperCont">

      <swiper class="swiper" easing-function="easeInOutCubic" indicator-dots="true" indicator-active-color="#ffffff"

        interval="3000" duration="500" indicator-color="rgba(255, 255, 255, .3)">

        <block wx:for="{{background}}" wx:key="index">

          <swiper-item>

            <view class="swiper-item"><image src="{{item}}"></image></view>

          </swiper-item>

        </block>

      </swiper>

    </view>

js:

Page({

  data: {

    background: ['../../assets/img/banner.png', '../../assets/img/banner.png'],

  }

})

wxss:

.swiperCont{

  width: 100%;

  box-sizing: border-box;

}

.swiper{

  width:710rpx;

  text-align: center;

  overflow: hidden;

  border-radius: 15rpx;

  margin:15rpx auto 30rpx;

}

.swiper-item image{

  width:710rpx;

  height:330rpx;

}

.swiper .wx-swiper-dot{

  width: 30rpx;

  height: 8rpx;

  border-radius:5rpx;

}

/* .swiper .wx-swiper-dot-active{

  background: #fff;

} */

预览：

注释：   圆角的swiper class的宽度和hidden很重要

官网：