插件简介

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. eclipse添加插件、删除插件 示例: eclipse marketplace

    在有些版本的eclips上并没有eclipse marketplace ,这让eclipse添加插件变得比较玛法,传统的办法都是通过自行下载插件或者用 help->install new sof ...

  2. Codeforces Round #281 (Div. 2) A. Vasya and Football 暴力

    A. Vasya and Football   Vasya has started watching football games. He has learned that for some foul ...

  3. JNDI 笔记(一) 概述

    很多地方都会用到JNDI,一大堆的缩写加上一大堆不清不楚的概念描述,使得在看到的时候都不认识,更不要说使用了.   JNDI,Java Naming Directory Interface,J2EE的 ...

  4. CentOS7 iso ks

  5. LBS(定位)的使用

    一.LBS(定位)的使用 1.使用框架Core Location 2.CLLocationManager (1)CoreLocation中使用CLLocationManager对象来做用户定位 (2) ...

  6. 树莓派(raspberry)启用root账户

    树莓派使用的linux是debian系统,所以树莓派启用root和debian是相同的. debian里root账户默认没有密码,但账户锁定. 当需要root权限时,由默认账户经由sudo执行,Ras ...

  7. Docker从安装部署到Hello World

    Docker 是 PaaS 提供商 dotCloud 开源的一个基于 LXC 的高级容器引擎,源代码托管在 Github 上, 基于go语言并遵从Apache2.0协议开源.Docker 是一个开源的 ...

  8. WebService的概念

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  9. Java调用JavaWebService

    1.pom配置 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId&g ...

  10. POI合并单元边框问题解决方法

    http://blog.csdn.net/hardworking0323/article/details/51105430