lightslider-支持移动触摸的轻量级jQuery幻灯片插件_html/css_WEB-ITnose
简要教程
lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马。它的特点还有:
- 完全响应式设计,自动适配任何设备。
- 可以单独设置每一个breakpoint。
- 画廊模式中可以创建带缩略图的幻灯片。
- 支持移动手机的swipe和触摸拖拽。
- 可动态添加或删除幻灯片。
- 文件体积小,主题丰富,实现简单。
- 采用CSS过渡效果,不支持CSS过渡效果的浏览器中使用jQuery来回退。
- 提供丰富的回调函数和公开方法。
- 提供自动播放和无限循环的旋转木马模式。
- 支持键盘、箭头和圆点导航。
- 跨浏览器、跨设备:Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone。
- 同一个页面中可以生成多个幻灯片实例。
- 幻灯片的内容可以是图片、视频等。
查看演示 下载插件
安装
可以通过npm或bower来安装该幻灯片插件。
$ bower install lightslider$ npm install lightslider
或者下载压缩包,在页面中引入以下文件。
<link type="text/css" rel="stylesheet" href="css/lightslider.css" /><script src="js/jquery.min.js"></script><script src="js/lightslider.js"></script>
使用方法
HTML结构
lightslider幻灯片的基本HTML结构如下:
<ul id="light-slider"> <li> <h3 id="First-Slide">First Slide</h3> <p>Lorem ipsum Cupidatat quis pariatur anim.</p> </li> <li> <h3 id="Second-Slide">Second Slide</h3> <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p> </li> ...</ul>
初始化插件
在页面DOM元素加载完毕之后,可以通过lightSlider()方法来初始化该幻灯片插件。
<script type="text/javascript"> $(document).ready(function() { $("#light-slider").lightSlider(); });</script>
配置参数
该幻灯片插件可用的配置参数有:
参数 | 类型 | 默认值 | 描述 |
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过渡动画被执行前触发 |
公开方法

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前
