//index.js

Page({
data: {
  swiperImages: [
    '/images/swiper1.jpg',
    '/images/swiper2.jpg',
    '/images/swiper3.jpg',
    '/images/swiper4.jpg',
    '/images/swiper5.jpg',
    '/images/swiper6.jpg'
    ]
},


 
})

<!-- 首頁.wxml -->
<!-- 使用微信小程序的視圖語言WXML -->
<view class="container">
<!-- 使用swiper組件實現循環展示6張圖片 -->
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true">
<!-- 使用block標籤和wx:for指令遍歷圖片數組 -->
<block wx:for="{{swiperImages}}" wx:key="index">
<!-- 使用swiper-item組件顯示每一張圖片 -->
<swiper-item class="swiper-item">
<image src="{{item}}" class="image"></image>
</swiper-item>
</block>
</swiper>
</view>

/* 首頁.wxss */
/* 使用微信小程序的樣式語言WXSS */
.container {
  /* 設置容器的寬高和背景色 */
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding: 0;
  }
  
  .swiper {
  /* 設置swiper的高度 */
  height: 400rpx;
  width: 100%;
  }
  
  .swiper-item{
  height: 400rpx;
  width: 100%;
  }


  .swiper-item image {
  /* 設置圖片的寬高和對齊方式 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  }