用spiwer容器写轮播图

swiper写轮播图，swiper是个滑块容器，indicator-dots生成小圆点，autoPlay自动切换，interval是切换的时间间隔，duration是动画的时长

<view class="contain">
  <!--轮播图-->
  <swiper class="home-swiper" indicator-dots="true" autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}">
    <block wx:for-items="{
  {imgUrls}}">
      <swiper-item>
        <image src="{
  {item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

wxcss的样式

.home-swiper {
  width: 100%;
  height: 440rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}

/*图片大小自适应*/

image {
  width: 100%;
  vertical-align: top;
  display: block;
}
</