小程序搭建展示效果

<!-- index.wxml -->
<view class="container">
  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <swiper-item>
      <image src="https://example.com/image1.jpg" class="slide-image" mode="aspectFill"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://example.com/image2.jpg" class="slide-image" mode="aspectFill"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://example.com/image3.jpg" class="slide-image" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
</view>

/* index.wxss */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.swiper {
  width: 80%;
  height: 300px;
}

.slide-image {
  width: 100%;
  height: 100%;
}

// index.js
Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
})