微信小程序swiper实现轮播图

参考文档

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

准备文件

wxml

<!--pages/catprofile/catprofile.wxml-->

<view class="container">
  <view class="banner_sec">
    <swiper class="banner" circular autoplay indicator-dots>
      <!-- 遍历那三张图片 -->
      <swiper-item wx:for="{{[1,2,3]}}">
        <image class="banner_pic" src="/images/{{item}}.jfif" mode="scaleToFill"></image>
      </swiper-item>
    </swiper>
  </view>
</view>

wxss

/* pages/catprofile/catprofile.wxss */

.container{
  width: 100%;
  padding: 20rpx;
}

.banner_sec{
  width: 100%;
  /* display: flex; */
}

.banner{
  width: 100%;
  height: 370rpx;
}

.banner_pic{
  height: 100%;
  width: 100%;
}

效果