图片轮播组件开发(Swiper)
最后更新: | 浏览次数: 151|组件以及效果
系统轮播组件基于swiper 9 深度定制,代码结构与源网站形式保持一致,它保留源程序参数的调用形式,另外扩展了配置式参数,免除需要额外编写Javascript代码的尴尬。
属性列表
属性名 | 说明 | 默认值 | 官网对应 |
---|---|---|---|
data-ident | 轮播组件ID,同一页面多个轮播ID必须唯一不可重复 | “” | |
data-lazy | 是否延迟执行轮播(当页面滚动时才执行轮播) | - | |
data-thumbs | 标记是否为图片缩略图模块 | - | |
data-mouseover | 移标悬停至图片自动切换 (仅缩略图模块有效) | - | |
data-parallax | 开启内容视差滚动效果 | - | parallax |
data-autoplay | 是否自动播放 | - | autoplay |
data-initialSlide | 初始滑动索引号 | 0 | initialSlide |
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-autoScrollOffset | 自动移动偏移 (缩略图组件有效) | 0 | autoScrollOffset |
案例演示
默认轮播效果
See the Pen Default switch effect by Huijun Yang (@hongge) on CodePen.
竖向轮播效果
See the Pen Vertical Swiper Effect by Huijun Yang (@hongge) on CodePen.
居中轮播效果
See the Pen Center Swiper Code by Huijun Yang (@hongge) on CodePen.
背景轮播效果
See the Pen Background Swiper Effect by Huijun Yang (@hongge) on CodePen.
联动轮播效果
See the Pen Linkage Swiper Effect by Huijun Yang (@hongge) on CodePen.