插件简介

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. AFNetworking 3.0携带參数上传文件Demo

    一.服务端代码: 服务端是java用国产nutz搞的,实际mvc框架都大同小异.就是提交文件的同一时候还带了个表单參数 @AdaptBy(type=UploadAdaptor.class, args= ...

  2. 3n+1问题

    #include <stdio.h> #include <math.h> // 算法竞赛的目标是编程对任意输入均得到正确的结果. // 请先独立完成,如果有困难可以翻阅本书代码 ...

  3. code+12月月赛 火锅盛宴

    时间限制: 2.0 秒 空间限制: 512 MB 题目背景 SkyDec和YJQQQAQ都是Yazid的好朋友.他们都非常喜欢吃火锅.有一天,他们聚在一起,享受一场火锅盛宴. 题目描述 在这场火锅盛宴 ...

  4. iOS手势识别

    一.手势识别与触摸事件 1.如果想监听一个view上面的触摸事件,可选的做法是: (1)自定义一个view (2)实现view的touches方法,在方法内部实现具体处理代码 2.通过touches方 ...

  5. iOS获取相册/相机图片-------自定义获取图片小控件

    一.功能简介 1.封装了一个按钮,点击按钮,会提示从何处获取图片:如果设备支持相机,可以从相机获取,同时还可以从手机相册获取图片. 2.选择图片后,有一个block回调,根据需求,将获得的图片拿来使用 ...

  6. Genuitec

  7. Django day04 路由控制

    Django请求的整个的生命周期 Django中路由控制的作用: 一: 简单配置 url 是一个函数 -第一个参数是正则表达式(如果要精确匹配:'^publish'/$ 以^开头,以$结尾) -第二个 ...

  8. centos7用rpm安装mysql5.7【初始用yum安装发现下载非常慢,就考虑本地用迅雷下载rpm方式安装】

    1.下载 4个rpm包 mysql-community-client-5.7.26-1.el7.x86_64.rpmmysql-community-common-5.7.26-1.el7.x86_64 ...

  9. 使用idea2.5建立maven项目

    使用idea的步骤: 1.建立一个新的maven项目 2.选中maven项目 3.点击next,输入groupID和artifactid 4.点击next  选择projectlocation 5.选 ...

  10. Struts/Hibernate/Spring源码下载

    Struts: https://olex.openlogic.com/packages/struts Hibernate: https://olex.openlogic.com/packages/hi ...