图片轮播组件开发(Swiper)

最后更新: | 浏览次数: 135|组件以及效果

系统轮播组件基于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.