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 id="lightSlider">
<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>
lightslider-支持移动触摸的轻量级jQuery幻灯片插件的更多相关文章
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
- jQuery幻灯片插件Owl Carousel
简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Glide.js:响应式 & 触摸友好的 jQuery 滑块插件
Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...
- Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件
AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...
- jQuery幻灯片插件autoPic
原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!
随机推荐
- 虚拟化(四):vsphere高可用功能前提-共享存储搭建
虚拟化(一):虚拟化及vmware产品介绍 虚拟化(二):虚拟化及vmware workstation产品使用 虚拟化(三):vsphere套件的安装注意及使用 虚拟化(四):vsphere高可用功能 ...
- Effective C++ 45-48
45.弄清c++在幕后为你所写.所调用的函数. 假设设置一个空类,c++编译器会声明下面函数:拷贝构造函数.赋值运算符,析构函数,一对取地址运算符函数(const和非const).而假设你没有声明不论 ...
- 霸气側漏的HTML5--之--强大的form表单
今天学习了一下html5,发现他真的太强大了,暂不说新增的画布,通信,本地存储等的炸天功能,就连表单也是异常的好用.忍不住发一篇博客和大家分享一下.原谅我标题党了.以后的html5的学习记录博文就以& ...
- Android - Error: "java.io.IOException: setDataSource failed.: status=0x80000000"
Error: "java.io.IOException: setDataSource failed.: status=0x80000000" 本文地址: http://blog.c ...
- 源码中修改Android的开机画面和动画【转】
本文转载自:http://blog.csdn.net/dddxxxx/article/details/54343976 参照文章:http://blog.csdn.net/a345017062/art ...
- poj2594——最小路径覆盖
Description Have you ever read any book about treasure exploration? Have you ever see any film about ...
- [POI 2008] BLO
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1123 [算法] 首先,如果一个点不是割点,那么,去掉该点后不连通的有序点对就为 : ...
- FFMS SQL文件执行错误
[mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 b ...
- Python 34(进程了解)
一:僵尸进程与孤儿进程 测试程序: 基本概念: 一个进程使用fork创建子进程,如果子进程退出,而父进程并没有调用wait或waitpid获取子进程的状态信息,那么子进程的进程描述符仍然保存在系统中. ...
- go之for循环
一.基于计数器的迭代 格式 for 初始化语句; 条件语句; 修饰语句{} 实例 package main import "fmt" func main(){ for i:=0;i ...