微信小程序------功能组件------横向轮播图

页面结构

<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
  <swiper-item>
    <image src="/pages/images/test.png" />
  </swiper-item>
  <swiper-item>
    <image src="/pages/images/1.png" />
  </swiper-item>
  <swiper-item>
    <image src="/pages/images/2.png" />
  </swiper-item>
</swiper>

在上述代码中，第1行为swiper组件设置了指示点的颜色为白半透明色，当前选中的指示点颜色为白色不透明。第3、6、9行使用image组件引入轮播图的图片

页面样式

.content-info-slide{
  height: 302rpx;
  margin-bottom: 20px;
}
.content-info-slide image{
  width: 100%;
  height: 100%;
}