如何解决swiper出现TypeError: Cannot read property '$$' ?

最近在练习小程序，偶然碰到轮播功能，我在引入时点击就会报错，图片为本地资源，current=0已经设置过了，无效，所以恳请大神指点
[渲染层错误] TypeError: Cannot read property '$$' of undefined
    at HTMLElement._attached.o._touchstartHandlerForDevtools (http://127.0.0.1:21285/__pageframe__/__dev__/WAWebview.js?t=wechat&s=1625795366898&v=2.17.0:2:1085880)(env: Windows,mp,1.05.2105170; lib: 2.17.0)
[渲染层错误] Uncaught TypeError: Cannot read property '$$' of undefined(env: Windows,mp,1.05.2105170; lib: 2.17.0)

轮播功能代码
<!--modules/carousel/carousel.wxml-->
<template name="carousel">
  <view>
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="0">
      <block wx:for="{{imgUrls}}" wx:key="key">
        <swiper-item>
          <image src="{{item}}" style="width:100%"/>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>

// modules/carousel/carousel.js
Page({
     data: {
       current:0,
       indicatorDots:true,  
       autoplay:true,  
       interval:5000,  
       duration:1000,  
       imgUrls:[  
         "../../src/images/a1.jpg",  
         "../../src/images/a2.jpg",  
         "../../src/images/a3.jpg", 
         "../../src/images/a4.jpg"
       ]
     }
})