简介
lory.js 是一个轻量级的纯 JavaScript 库，用于实现全屏滑动和轮播效果。它支持触摸事件和 CSS3 动画，并且能够在移动设备和桌面浏览器上良好地运行。
安装
通过 npm 安装 lory.js：
--- ------- ------- ------
使用
使用 lory.js 很简单：
- 在 HTML 中创建一个容器元素，并在其中添加您要滑动/轮播的项。例如：
---- ---------------
---- --------------
---- -----------------------
---- -----------------------
---- -----------------------
------
------- 在 JavaScript 中，创建一个新的 lory 实例并将其绑定到容器元素：
------ ---- ---- --------- ----- ------ - --------------------------------- ----- ------- - - -- ---- - ----- -------- - ------------ --------
配置选项
lory.js 支持多个配置选项，您可以在创建实例时传递这些选项。以下是可用选项的列表：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
slidesToScroll |
number |
1 |
每次滑动的项数。 |
slideSpeed |
number |
300 |
每个滑块滑动的速度（以毫秒为单位）。 |
rewindSpeed |
number |
600 |
在边缘滚动时，回绕到第一张幻灯片所需的时间。 |
snapBackSpeed |
number |
200 |
当超出幻灯片框架时，动画回弹到幻灯片框架的速度。 |
ease |
string |
ease |
过渡效果的 CSS 动画过渡-timing-function 属性。 |
classNameFrame |
string |
js_frame |
包含所有滑块的容器元素的类名称。 |
classNameSlideContainer |
string |
js_slides |
所有滑块的包含元素的类名称。 |
classNamePrevCtrl |
string |
js_prev |
前一个控件的类名称。 |
classNameNextCtrl |
string |
js_next |
下一个控件的类名称。 |
initialIndex |
number |
0 |
初始幻灯片的索引。 |
infinite |
boolean |
false |
是否启用无限循环。 |
enableMouseEvents |
boolean |
false |
是否启用鼠标事件。 |
rewind |
boolean |
false |
是否回绕到第一张幻灯片（而不是停止在边缘）。 |
autoWidth |
boolean |
false |
是否自动设置每个元素的宽度。如果启用了此选项，则必须为滑块中的每个元素指定一个相同的宽度或使用 Flexbox 来自动确定宽度。 |
slidesToShow |
number |
1 |
同时显示的幻灯片数。如果启用 autoWidth，此选项无效。 |
示例代码
--------- ----- ----- ---------- ------ ----- ---------------- -------------- ------------ ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------