微信小程序 處理事件的方法未執(zhí)行，提示沒有方法來(lái)執(zhí)行對(duì)應(yīng)的事件

在自己的聯(lián)系項(xiàng)目里面，index目錄下引入了一個(gè)swpier組件，使用的是微信小程序提供組件。
代碼和官網(wǎng)上的一模一樣：
wxml：

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

js：

// conponents/Swipers/NormalSwiper/NormalSwiper.js

Component({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000
  },
  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
    })
  }
})

在執(zhí)行這四個(gè)操作的時(shí)候提示沒有方法來(lái)指定對(duì)應(yīng)的事件，我看代碼和index里面框架提供的使用沒有什么區(qū)別，是哪里出問(wèn)題了，該如何改正