【微信小程序】swiper-滚动的banner

swiper.wxml

<view class="page-section page-section-spacing swiper">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}" wx:key="*this">
            <swiper-item>
                <image src="{{item}}" class="slide-image" width="" height="150"/>
            </swiper-item>
        </block>
    </swiper>
</view>

swiper.js

Page({
  data: {
    imgUrls: [
              'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 
              'http://www.junfawl.cn/skin/images/5780c309432c5.jpg', 
              'http://www.junfawl.cn/uploads/allimg/171019/1-1G019214Q63W.jpg'
              ],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})