微信小程序开发demo10

<!-- 
  1 轮播图外层容器 swiper
  2 每一个轮播项 swiper-item
  3 swiper 标签存在默认样式
    1 width 100%
    2 height 150px  image存在默认宽度和高度 320*240
    3 swiper 高度无法实现自由内容撑开
  4 先找出 原图的宽度和高度 等比例 给swiper 定宽度和高度
    原图宽度高度 496*496 px
    是wiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
    swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
    height： 100vw *496/496
  5 autoplay 自动轮播 
  6 interval 修改轮播时间
  7 circular 衔接轮播
  8 indicator-dots 显示 指示器 分页器 索引器
  9 indicator-color 指示器未选择颜色
  10 indicator-active-color 选中的时候指示器的颜色
 -->

<swiper autoplay="true" interval="2000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff9400">
  <swiper-item> <image mode="widthFix" src="https://pic.imgdb.cn/item/62315e025baa1a80abb856fd.jpg"/></swiper-item>
  <swiper-item> <image mode="widthFix" src="https://pic.imgdb.cn/item/62315e025baa1a80abb85703.jpg"/></swiper-item>
  <swiper-item> <image mode="widthFix" src="https://pic.imgdb.cn/item/62315e025baa1a80abb85709.jpg"/></swiper-item>
  <swiper-item> <image mode="widthFix" src="https://pic.imgdb.cn/item/62315e025baa1a80abb85710.jpg"/></swiper-item>
</swiper>

 demo10.wxml

/* pages/demo10/demo10.wxss */
swiper{
  width: 100%;
  height: calc(100vw *496/496);
}
image{
  width: 100%;

}

demo10.wxss