微信小程序swiper实现轮播图

小程序的滑动组件swiper：

• autoplay：自动滚动

• interval：切换时间间隔

• duration：滑动动画时长

• indicator-dots：是否显示面板指示点

• indicator-active-color：当前选中的指示点颜色

• vertical：滑动方向是否为纵向

• circular：是否采用衔接滑动（无缝滚动）

• display-multiple-items：同时显示的滑块数量

<swiper class="swiper" autoplay="true" interval="3000" duration="1000" indicator-dots="true" indicator-active-color="#007aff" vertical="true" circular="true" display-multiple-items="2">
	<block wx:for="{{imgs}}">
		<swiper-item>
			<image src="{{item}}" class="item_img"></image>
		</swiper-item>
	</block>
</swiper>

index.js 中

Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgs:['../../images/1.png','../../images/2.png','../../images/3.png']
  },
  。。。
})

wxss中

.swiper {
  height: 340rpx;
}
.item_img {
  width: 100%;
  height: 100%;
}