wxml頁面程式碼：

<!--圖片輪播 -->
<view class='swipercontainer'>
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical='{{vertical}}' circular='{{circular}}'>
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image swipimg"/>
      </swiper-item>
    </block>
  </swiper>
</view>
 

js頁面程式碼

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    imgUrls: [
      ' ../../images/fl01.png',
      ' ../../images/fl02.png',
      ' ../../images/fl03.png'
    ],
    indicatorDots: true, //	是否顯示面板指示點
    autoplay: true, //是否自動切換
    circular: true, //是否採用銜接滑動
    vertical: false, //滑動方向是否為縱向
    interval: 3000, //自動切換時間間隔
    duration: 100, //滑動動畫時長
  }
})
 

wxss檔案：

.swipercontainer {
  position: relative;
  left: 0rpx;
  right: 0rpx;
  width: 100%;
  /*height: 20%;*/
  background: red;
}

.swipimg {
  width: 100%;
}

詳細文件請見微信開放平臺：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html