lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备，它可以制作为带缩略图的内容幻灯片，或者制作为无限循环的旋转木马。它的特点还有：
查看演示 下载插件
安装
可以通过npm或bower来安装该幻灯片插件。
$ bower install lightslider$ npm install lightslider
或者下载压缩包，在页面中引入以下文件。
使用方法
HTML结构
lightslider幻灯片的基本HTML结构如下：
Lorem ipsum Cupidatat quis pariatur anim.
Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.
初始化插件
在页面DOM元素加载完毕之后，可以通过lightSlider()方法来初始化该幻灯片插件。
配置参数
该幻灯片插件可用的配置参数有：
| 参数 | 类型 | 默认值 | 描述 |
| item | number | 3 | 同时显示的slide的数量 |
| autoWidth | boolean | false | 定制每一个slide的宽度 |
| slideMove | number | 1 | 同一时间被移动的slide的数量 |
| slideMargin | number | 10 | 每一个slide之间的间距 |
| addClass | string | '' | 为幻灯片添加额外的class |
| mode | string | 'slide' | 动画过渡的类型，可以是'slide'或'fade' |
| useCSS | boolean | true | true表示使用CSS动画过渡效果，false表示使用jQuery动画过渡效果 |
| cssEasing | string | 'ease' | CSS过渡动画使用的easing效果 |
| easing | string | 'linear' | jQuery过渡动画使用的easing效果 |
| speed | number | 400 | 过渡动画的持续时间，单位毫秒 |
| auto | boolean | false | 如果设置为true，幻灯片将自动播放 |
| pauseOnHover | boolean | false | 鼠标滑过时停止自动播放 |
| loop | boolean | false | false表示在播放到最后一帧时不会跳转到开头重新播放 |
| slideEndAnimation | bolean | true | 允许slideEnd动画 |
| pause | number | 2000 | 两个过渡动画之间的间隔时间 |
| keyPress | boolean | false | 是否允许使用键盘导航 |
| controls | boolean | true | 如果设置为false，prev/next按钮将不会被显示 |
| prevHtml | string | '' | 自定义prev按钮的HTML |
| nextHtml | string | '' | 自定义next按钮的HTML |
| rtl | boolean | false | 改变方向，从右到左 |
| adaptiveHeight | boolean | false | 基于各个slide的高度来动态调整幻灯片的高度 |
| vertical | boolean | false | 制作垂直幻灯片效果 |
| verticalHeight | number | 500 | 垂直幻灯片模式中设置slide的高度（如果slide数量大于1） |
| vThumbWidth | number | 100 | 垂直幻灯片模式中缩略图的宽度 |
| thumbItem | number | 10 | 同时显示缩略图的数量 |
| pager | boolean | true | 是否开启圆点导航 |
| gallery | boolean | true | 是否开启带缩略图的幻灯片模式 |
| galleryMargin | number | 5 | 画廊和slide之间的间距 |
| thumbMargin | number | 3 | 缩略图之间的间距 |
| currentPagerPosition | string | 'middle' | 缩略图的位置，可以是: 'left', 'middle', 'right' |
| enableTouch | boolean | true | 是否支持移动触摸 |
| enableDrag | boolean | true | 是否支持桌面设备中使用鼠标拖拽切换幻灯片 |
| freeMove | boolean | true | 是否允许在swipe或drag的时候自由移动幻灯片 |
| responsive | object | null | 单独设置每一个breakpoint |
回调函数
| 回调函数 | 参数 | 描述 |
| onBeforeStart | el | 幻灯片开始加载时触发 |
| onSliderLoad | el | 幻灯片被加载后立刻执行 |
| onBeforeSlide | el | 每一个slide过渡动画之前被执行 |
| onAfterSlide | el | 每一个slide过渡动画之后被执行 |
| onBeforeNextSlide | el | 每一次"Next" slide过渡动画被执行前触发 |
| onBeforePrevSlide | el | 每一次"Prev" slide过渡动画被执行前触发 |
公开方法
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
