插件简介

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幻灯片插件的更多相关文章

  1. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

  2. jQuery幻灯片插件Owl Carousel

    简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...

  3. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  4. Glide.js:响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

  5. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  6. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  7. 12款jQuery幻灯片插件和幻灯片特效教程

    jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...

  8. AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件

    AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...

  9. jQuery幻灯片插件autoPic

    原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

随机推荐

  1. ios调用dismissViewController的一个小陷阱

    我们的APP从启动到进入主页面.是通过presentViewController构造了一个ViewController序列,类似于首页 -> 登陆页 -> 启动载入页 -> 主页面 ...

  2. 尝试create tech team

    自从上一家公司之后,我很少有机会去带一些新人(公司一般都招一些技术独立性的工程师),特别是经验不是特别多的新小伙伴.在如今管理扁平化的公司,我正逐渐搭建自己的小team,并试图让团队成员快速融入并成长 ...

  3. qml

    用qt非常久了.可是一直没有注意到一个叫做qml的东西.今天google了一下,总结一下我的理解. 从表面上看qml就是用css javascript那一套来做软件的GUI,和原来的C++的widge ...

  4. Hadoop Web项目--Mahout0.10 MR算法集锦

    1. 涉及技术及下载 项目开发使用到的软件有:Myeclipse2014,JDK1.8.Hadoop2.6,MySQL5.6.EasyUI1.3.6,jQuery2.0,Spring4.1.3,Hib ...

  5. Zoj 3535 Gao the String II (AC自己主动机+dp)

    题目大意: 用集合A中的串构造出一个串,使之让很多其它的setB中的串成为他的子串. 思路分析: 和 Codeforces 86C 几乎相同. 只是这里是要用A中的构造. 先用A 和 B的串构造一个自 ...

  6. Android WiFi开发教程(二)——WiFi的搜索和连接

    在上一篇中我们介绍了WiFi热点的创建和关闭,如果你还没阅读过,建议先阅读上一篇文章Android WiFi开发教程(一)——WiFi热点的创建与关闭. 本章节主要继续介绍WiFi的搜索和连接. Wi ...

  7. Java之POI读取Excel的Package should contain a content type part [M1.13]] with root cause异常问题解决

    Java之POI读取Excel的Package should contain a content type part [M1.13]] with root cause异常问题解决 引言: 在Java中 ...

  8. 包含utf8字符的 pickle 转 json的大坑处理过程

    背景:希望将pickle转换为json,由于pickle里有utf8的字符,因此转换失败. 转换代码如下: ''' Convert a pkl file into json file ''' impo ...

  9. C 非标准库(conio.h)

    所谓的 C 标准库(C standard library),是指在 ISO C 或者 POSIX 标准中定义的: POSIX is a superset(超集) of the standard C l ...

  10. codeforces round #424 div2

    A 暴力查询,分三段查就可以了 #include<bits/stdc++.h> using namespace std; ; int n, pos; int a[N]; int main( ...