滑块视图容器（焦点轮播图）

为了更美观，可以让图片宽度充满全屏,并保持图片不变形

<swiper>
  <swiper-item>
    <image mode="widthFix" src="../../images/1.png"></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="../../images/1.png"></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="../../images/1.png"></image>
  </swiper-item>
</swiper>

同时设置图片样式充满全屏，因为图片默认大小：宽度 320px、高度 240px，可让宽度充满全屏

image {
  width: 100%;
}

Swiper 常用属性说明

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向

<swiper
  class="swiper"
  indicator-dots
  indicator-color="#fff"
  indicator-active-color="#f00"
  autoplay
  interval="5000"
  duration="1000"
  circular
  vertical
>
  <swiper-item>
    <image mode="widthFix" src="../../images/1.png"></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="../../images/1.png"></image>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="../../images/1.png"></image>
  </swiper-item>
</swiper>