小程序:swiper 微信内置轮播图组件
swiper 微信内置轮播图组件
1.轮播图外层容器 swiper
2.每一个轮播项 swiper-item
3.swiper标签存在默认样式
1.width:100%
2.height:150px 图片也有默认样式
3.swiper高度无法实现由内容撑开
4.先找出来 原图的宽度和高度 等比例 给swiper定宽度和高度
swiper 宽度 / swiper 高度=原图的宽度 / 原图的高度
swiper 高度=swiper 宽度 * 原图的高度 / 原图的宽度
height:100vw * 352 /1125
calc(100vw * 352 /1125 )
5.autoplay 自动轮播
6.interval 修改轮播时间
7.circular 是否循环轮播
8.indicator-dots 是否显示面板指示点 显示指示器,分页器 索引器
9.indicator-color 指示器的未选择的颜色
10.indicator-active-color 当前选中的指示点颜色
1.轮播图外层容器 swiper
2.每一个轮播项 swiper-item
3.swiper标签存在默认样式
1.width:100%
2.height:150px 图片也有默认样式
3.swiper高度无法实现由内容撑开
4.先找出来 原图的宽度和高度 等比例 给swiper定宽度和高度
swiper 宽度 / swiper 高度=原图的宽度 / 原图的高度
swiper 高度=swiper 宽度 * 原图的高度 / 原图的宽度
height:100vw * 352 /1125
calc(100vw * 352 /1125 )
5.autoplay 自动轮播
6.interval 修改轮播时间
7.circular 是否循环轮播
8.indicator-dots 是否显示面板指示点 显示指示器,分页器 索引器
9.indicator-color 指示器的未选择的颜色
10.indicator-active-color 当前选中的指示点颜色