图片轮播组件开发
| Visit:222
系统轮播组件基于swiper 深度定制(保留源程序所有的参数调用形式),采用参数配置替代手写编程代码形式，以实现各种轮播滚动效果，该方式可适配绝大多数情况下轮播效果
代码结构与源网站形式保持一致
属性列表
| 属性名 | 说明 | 默认值 | 官网对应 |
|---|---|---|---|
| data-ident | 轮播组件ID,同一页面多个轮播ID必须唯一不可重复 | “” | |
| data-lazy | 是否延迟执行轮播(当页面滚动时才执行轮播) | - | |
| data-mouseover | 移标悬停至图片自动切换(产品模式下同时暂停播放),只在缩略图下有效 | - | |
| data-parallax | 开启内容视差滚动效果 | - | parallax |
| data-autoplay | 是否自动播放 | - | autoplay |
| data-centeredSlides | 居中幻灯片 | - | centeredSlides |
| data-loop | 是否开启无限循环 | - | loop |
| data-speed | 切换速度 | int（默认600） | speeed |
| data-delay | 自动切换的时间间隔,只有设置data-autoplay属性后才会生效 | int（默认3000） | delay |
| data-slidesPerView | 设置slider容器能够同时显示的slides数量 | int（默认1） | slidesPerView |
| data-slidesPerGroup | 在carousel mode下定义slides的数量多少为一组。 | int（默认1） | slidesPerGroup |
| data-spaceBetween | 在slide之间设置距离（单位px）。 | int（默认0） | spaceBetween |
| data-effect | 设置Slide的切换效果，"slide"（位移）、"fade"（淡入）,"carousel"(旋转) | “slide” | effect |
| data-paginationType | 分页器样式类型, bullets’ （圆点）、‘fraction’ （分式） 、 ‘progressbar’ （进度条）、‘custom’（自定义） | "bullets" | type |
| data-direction | Swiper的滑动方向，水平切换（horizontal） ,垂直方向切换 （vertical） |
horizontal |
direction |
| data-breakpoints | 断点设定，允许为不同的响应断点（屏幕尺寸）设置不同的参数。 | breakpoints | |
| data-thumbs | 是否为缩略图轮播（自定义属性） | - |
案例演示
默认轮播效果
竖向轮播效果
居中轮播效果
背景轮播效果
联动轮播效果