图片轮播组件开发

最后更新:    浏览次数: 1042

系统轮播组件基于swiper 9深度定制(保留源程序所有的参数调用形式),采用参数配置替代手写编程代码形式,以实现各种轮播滚动效果,该方式可适配绝大多数情况下轮播效果

代码结构与源网站形式保持一致

属性列表

属性名                    说明 默认值 官网对应
data-ident 轮播组件Id,同一页面id必须唯一 “”  
data-speed 切换速度 int(默认600) speeed
data-delay 自动切换的时间间隔 int(默认2000) 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-loop 是否开启无限循环 - loop
data-direction Swiper的滑动方向,水平切换(horizontal)  ,垂直方向切换 (vertical horizontal direction
data-parallax 开启内容视差滚动效果 - parallax
data-breakpoints 断点设定,允许为不同的响应断点(屏幕尺寸)设置不同的参数。   breakpoints
data-autoplay 在slide自动切换开始时执行。 - autoplay
data-centeredSlides  居中幻灯片 - centeredSlides
data-thumbs 是否为缩略图轮播(自定义属性) -