效果：

一般用於首頁的展示頁面

直接附上程式碼：在index.wxml

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <image src="{{item}}" class="slide-image" /> 
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
</view>
 

index.wxss:樣式可做參考，可自行設定圖片寬度高度

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
.page-body{
  padding-top:10rpx;
}
.page-section{
  width: 100%;
  margin-bottom: 10rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 10rpx;
}
.slide-image{
  width:100%;
  height:230px;
}
 

index.js中設定輪播圖片的地址，是否顯示面板指示點，是否自動切換，切換時間等

Page({
  data: {
    background: [
      '../../images/bad0.png',
      '../../images/bad1.jpg',
      '../../images/bad3.jpg',
      '../../images/tennis.jpg'
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    circular: false,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  }
})
 

常用的swiper屬性如下：

更多參考詳見官方文件：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html