微信小程序轮播图

                            效果图：

 

 

 wxml:

<view class="page-body">

  <view class="page-section page-section-spacing swiper">

    <swiper circular="true" indicator-color="white" indicator-dots="true" indicator-active-color="red" autoplay="true" interval="3000">

      <swiper-item>

        <image src="https://www.helloimg.com/images/2023/03/29/o3bmxo.jpg" mode="widthFix" />

      </swiper-item>

      <swiper-item>

        <image src="https://www.helloimg.com/images/2023/03/29/o3bEhb.jpg" mode="widthFix" />

      </swiper-item>

      <swiper-item>

        <image src="https://www.helloimg.com/images/2023/03/29/o3bsWD.jpg" mode="widthFix" />

      </swiper-item>

    </swiper>

  </view>

</view>

 

 

wxss:

swiper{

  width: 94%;

  height: calc(750rpx * 280/520);

  margin: 20rpx;

}

image{

width: 100%;

}