微信小程序实现轮播图效果

轮播图实现效果：（可循环播放）

代码实现：（复制可用）

index.wxml：

<view class="swiper">
    <swiper class="banner" indicator-dots indicator-color="rgb(255, 255, 255, 0.5)" indicator-active-color="#fff" autoplay interval="3000" circular>
    <!-- previous-margin="20" next-margin="20" -->
      <swiper-item class="bannerItem">
        <image src="/image/yyqx1.jpg" mode="widthFix"></image>
      </swiper-item>
      <swiper-item class="bannerItem">
        <image src="/image/yyqx2.jpg" mode="widthFix"></image>
      </swiper-item>
      <swiper-item class="bannerItem">
        <image src="/image/yyqx3.jpg" mode="widthFix"></image>
      </swiper-item>
      <swiper-item class="bannerItem">
        <image src="/image/yyqx4.jpg" mode="widthFix"></image>
      </swiper-item>
      <swiper-item class="bannerItem">
        <image src="/image/yyqx5.jpg" mode="widthFix"></image>
      </swiper-item>
    </swiper>
  </view>

index.wxss：

/* swiper */
.swiper {
  display: flex;
  justify-content: center;
  margin-top: 15rpx;
}
.banner {
  height: 320rpx;
  width: 706rpx;
}
.banner image {
  width: 100%;
}
.bannerItem {
  box-sizing: border-box;
  border-radius: 15rpx;
}