微信小程序（5）：swiper滑动轮播组件

wiper-item 仅可放置在swiper组件中，宽高自动设置为100%

示例：

index.wxml文件代码：

<swiper class="banner" indicator-dots indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" autoplay interval="5000" current="1" circular previous-margin="20" next-margin="20">
  <swiper-item>
    <navigator url="/pages/logs/logs">
      <image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg"></image>
    </navigator>
  </swiper-item>

  <swiper-item>
    <navigator url="/pages/logs/logs">
      <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=106816659,2709792564&fm=26&gp=0.jpg"></image>
    </navigator>
  </swiper-item>

  <swiper-item>
    <navigator url="/pages/logs/logs">
      <image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1612138888,1794405442&fm=26&gp=0.jpg"></image>
    </navigator>
  </swiper-item>

  <swiper-item>
    <navigator url="/pages/logs/logs">
      <image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3760447650,2131348306&fm=26&gp=0.jpg"></image>
    </navigator>
  </swiper-item>
</swiper>

index.wxss文件代码：

.banner{
   width: 100%;
 }
 .banner swiper-item{
   padding: 0 5px;
   box-sizing: border-box;
 }
 .banner image{
   width: 100%;
 }

效果图：

具体参数如下图所示，实际应用时可根据需要设置。