lightslider-支持移动触摸的轻量级jQuery幻灯片插件
插件简介
lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备，它可以制作为带缩略图的内容幻灯片，或者制作为无限循环的旋转木马。它的特点还有：下载地址
下载地址：http://www.jqhtml.com/5633.html
功能
- 完全响应式设计，自动适配任何设备。
- 可以单独设置每一个breakpoint。
- 画廊模式中可以创建带缩略图的幻灯片。
- 支持移动手机的swipe和触摸拖拽。
- 可动态添加或删除幻灯片。
- 文件体积小，主题丰富，实现简单。
- 采用CSS过渡效果，不支持CSS过渡效果的浏览器中使用jQuery来回退。
- 提供丰富的回调函数和公开方法。
- 提供自动播放和无限循环的旋转木马模式。
- 支持键盘、箭头和圆点导航。
- 跨浏览器、跨设备：Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone。
- 同一个页面中可以生成多个幻灯片实例。
- 幻灯片的内容可以是图片、视频等。
安装
可以通过npm或bower来安装该幻灯片插件。
$ bower install lightslider
$ npm install lightslider
也可以下载安装包，在页面中引入文件 插件下载地址http://www.jqhtml.com/5633.html
官方地址 http://sachinchoolur.github.io/lightslider/index.html
<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="js/jquery.min.js"></script>
<script src="js/lightslider.js"></script>
使用方法
HTML结构
<ul >
<li>
<h4>First Slide</h4>
<p>Lorem ipsum Cupidatat quis pariatur anim.</p>
</li>
<li>
<h4>Second Slide</h4>
<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
</li>
...
</ul>
初使化插件
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
参数设置示例
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
Play with settings
$(document).ready(function() {
$("#lightSlider").lightSlider({
item: 3,
autoWidth: false,
slideMove: 1, // slidemove will be 1 if loop is true
slideMargin: 10,
addClass: '',
mode: "slide",
useCSS: true,
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear', //'for jquery animation',////
speed: 400, //ms'
auto: false,
loop: false,
slideEndAnimation: true,
pause: 2000,
keyPress: false,
controls: true,
prevHtml: '',
nextHtml: '',
rtl:false,
adaptiveHeight:false,
vertical:false,
verticalHeight:500,
vThumbWidth:100,
thumbItem:10,
pager: true,
gallery: false,
galleryMargin: 5,
thumbMargin: 5,
currentPagerPosition: 'middle',
enableTouch:true,
enableDrag:true,
freeMove:true,
swipeThreshold: 40,
responsive : [],
onBeforeStart: function (el) {},
onSliderLoad: function (el) {},
onBeforeSlide: function (el) {},
onAfterSlide: function (el) {},
onBeforeNextSlide: function (el) {},
onBeforePrevSlide: function (el) {}
});
});
参数配置
| 参数 | 类型 | 默认值 | 描述 |
| 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过渡动画被执行前触发 |
公开方法
| 方法 | 描述 |
| goToSlide() | 跳转到指定的slide |
| goToPrevSlide() | 跳转到前一个slide |
| goToNextSlide() | 跳转到下一个 |
| refresh | 刷新幻灯片 |
| play() | 播放幻灯片 |
| pause() | 暂停幻灯片 |
公开方法示列
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#lightSlider").lightSlider();
slider.goToSlide(3);
slider.goToPrevSlide();
slider.goToNextSlide();
slider.getCurrentSlideCount();
slider.refresh();
slider.play();
slider.pause();
});
</script>