图片轮播组件定制
最后更新: | 浏览次数: 1187|组件以及效果
图片轮播组件基于swiper 11 深度优化定制，保留swiper原始html结构，使用html data-*形式配置组件属性以实现不同的功能。
HTML自定义属性
| 属性名 | 说明 | 默认值 | 官网对应 |
|---|---|---|---|
| data-ident | 轮播组件ID,同一页面多个轮播ID必须唯一不可重复 | “” | |
| data-lazy | 是否延迟执行轮播(当页面滚动时才执行轮播) | - | |
| data-thumbs | 标记swiper是否为图片缩略图模块 | - | |
| data-mouseover | 移标悬停至图片自动切换 (仅缩略图模块有效) | - | |
| data-disableoninteraction | 用户交互后禁用 | - | disableOnInteraction |
| data-pauseonmouseenter | 鼠标介入后暂停自动播放 | pauseOnMouseEnter | |
| data-sensitivity | 鼠标滚轮的灵敏度，值越大鼠标滚轮滚动时swiper位移越大 | 1 | sensitivity |
| data-reversedirection | 初始化后反方向滚动 | reverseDirection | |
| data-parallax | 开启内容视差滚动效果 | - | parallax |
| data-autoplay | 是否自动播放 | - | autoplay |
| data-initialSlide | 初始滑动索引号 | 0 | initialSlide |
| data-slidetoclickedslide | - | slideToClickedSlide | |
| data-centeredSlides | 居中幻灯片 | - | centeredSlides |
| data-loop | 是否开启无限循环 | - | loop |
| data-speed | 切换速度 | int（默认600） | speeed |
| data-delay | 自动切换的时间间隔,也可为每个slide单独设置间隔 | 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"(旋转),"panorma"(全景) | “slide” | effect |
| data-paginationType | 分页器样式类型, bullets’ （圆点）、‘fraction’ （分式） 、 ‘progressbar’ （进度条）、‘custom’（自定义） | "bullets" | type |
| data-direction | Swiper的滑动方向，水平切换（horizontal） ,垂直方向切换 （vertical） | horizontal | direction |
| data-breakpoints | 断点设定，允许为不同的响应断点（屏幕尺寸）设置不同的参数。 | breakpoints | |
| data-autoScrollOffset | 自动移动偏移 (缩略图组件有效) | 0 | autoScrollOffset |
CSS变量
| 变量名称 | 默认值 | 说明 |
|---|---|---|
| --max-width | 100% | 容器最大显示宽度 |
| --height (-sm/-md/-lg/-xl) | auto | 分别定义在不同断点下容器高度(移动优先) |
| --object-position | center | 容器内图片和视频元素的位置 |
| --align-y | center | 容器内容区块纵向显示位置 |
| --align-x | center | 容器内容区块横向显示位置 |
| --content-max-width | auto | 容器内容区块最大显示宽度 |
| --body-color | inherit | 重写文字颜色 |
| --body-font-size | inherit | 重写文字大小 |
| --body-line-height | inherit | 重写文字行高 |
| --title-margin-bottom | 0.75rem | 标题下间距(仅h1,h2,h3有效) |
| --overlay-color | inherit | 遮罩颜色 |
案例演示
默认轮播效果
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.