微信小程序实现轮播图功能

<!-- 轮播图开始 -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
  <block wx:for="{{bnrUrl}}" wx:for-index="index">
    <swiper-item>
      <image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
    </swiper-item>
  </block>
</swiper>
<!-- 轮播图结束 -->

/* 轮播图样式 */
.u-wrp-bnr {
  width: 100%;
  height: 350rpx;
  display: block;
  position: relative;
  top: 5rpx; 
  background: #f0f0f0;
}
.u-img-slide {
  width: 100%;
  height: inherit;
}

 data: {
 
    "bnrUrl": [{
      "url": "../../images/swiper1.jpg"
    }, {
        "url": "../../images/swiper2.jpg"
    }, {
        "url": "../../images/swiper3.jpg"
    }]

  },