npm 包 lory.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

lory.js 是一个轻量级的纯 JavaScript 库，用于实现全屏滑动和轮播效果。它支持触摸事件和 CSS3 动画，并且能够在移动设备和桌面浏览器上良好地运行。

安装

通过 npm 安装 lory.js：

npm install lory.js --save

使用

使用 lory.js 很简单：

在 HTML 中创建一个容器元素，并在其中添加您要滑动/轮播的项。例如：

<div class="slider">
  <div class="frame">
    <div class="slide">第一张</div>
    <div class="slide">第二张</div>
    <div class="slide">第三张</div>
  </div>
</div>

在 JavaScript 中，创建一个新的 lory 实例并将其绑定到容器元素：

import lory from 'lory.js'

const slider = document.querySelector('.slider')
const options = {
  // 配置选项
}

const instance = lory(slider, options)

配置选项

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，此选项无效。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>lory.js Demo</title>

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/34320) ，转载请注明来源
[https://www.javascriptcn.com/post/34320](https://www.javascriptcn.com/post/34320)