Micro-channel applet swiper

swiper

swiper-item

Look at the piece of code

<swiper style="width:100%;height:500rpx">
  <swiper-item style="background-color:#ff6900">
    <image src="/images/wx.png" ></image>
  </swiper-item>
</swiper>

We set the width and height of Swiper, swiper-item does automatically sets the size of 100% swiper, but swiper-item and the image size is not set.

Width and height must be provided to the image:

<swiper style="width:100%;height:500rpx">
  <swiper-item style="background-color:#ff6900">
    <image src="/images/wx.png" style="width:100%;height:500rpx"></image>
  </swiper-item>
</swiper>

The pattern is written wxss file

swiper {
  width: 100%;
  height: 500rpx;
}

swiper image {
  width: 100%;
  height: 500rpx;
}

An indicator coupled to swiper, AutoPlay interval is 2 seconds

<swiper indicator-dots="true" autoplay="true" interval="2000">
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
</swiper>