什么是 jquery.slimer
jquery.slimer 是一个基于 jQuery 的插件，用于创建滑动面板效果。它可以用于构建有滑动特效的 web 页面，提供了弹性、缓动等动态效果。
安装jquery.slimer
使用 npm 进行安装，打开终端，执行命令：
npm install jquery.slimer --save
导入jquery.slimer
在 HTML 中导入 jquery 和 jquery.slimer 即可使用该插件，引入的前后顺序如下：
-- -------------------- ---- -------
--------- -----
------
------
------- ----------------------------------------------------------
------- -----------------------------------------------------------
-------
------
----------------- ---------
---- -------------------------
--- ---------------------
--- --------------------------
--- --------------------------
--- --------------------------
-----
------
--------
-------------------------------
---------- ------------
---
---------
-------
-------jquery.slimer 的常见配置项
jquery.slimer 插件提供了多达 15 个配置项供开发者自由设置，常见的配置项如下：
| 配置项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| duration | number | 1000 | 动画持续时间，单位为毫秒 |
| direction | string | 'horizontal' | 滑动方向，可选项为 'horizontal'（水平）、'vertical'（垂直） |
| isAutoPlay | boolean | false | 是否开启自动播放 |
| interval | number | 3000 | 自动播放的间隔时间，单位为毫秒 |
| currentIdx | number | 0 | 初始化时展示的子元素序号，从 0 开始计数 |
| prevBtn | selector | '' | 上一页按钮的选择器，例如：'.slimer-prev' |
| nextBtn | selector | '' | 下一页按钮的选择器，例如：'.slimer-next' |
| pagination | selector | '' | 分页器的选择器，例如：'.slimer-pagination' |
| hasArrow | boolean | true | 是否显示箭头，默认值为 true |
| hasPagination | boolean | true | 是否显示分页器，默认值为 true |
| arrowShape | array | [] | 自定义箭头样式，例如：['<', '>'] |
jquery.slimer 示例代码
-- -------------------- ---- -------
--------- -----
------
------
------- ----------------------------------------------------------
------- -----------------------------------------------------------
-------
----------------- -
------ ------
------- ------
--------- -------
--------- ---------
-
------------- -
----------- -----
------- --
-------- --
--------- ---------
---- --
----- --
-
------------ -
------ -----
------ ------
------- ------
----------------- -----
----------- -------
---------- -----
------------ ------
------ -----
-
--------
-------
------
----------------- ---------
---- -------------------------
--- ---------------------
--- --------------------------
--- --------------------------
--- --------------------------
-----
------
--------
-------------------------------
--------- ----
---------- -------------
----------- -----
--------- -----
--------- -----
-------------- -----
----------- -------- -------
---
---------
-------
-------以上就是 jquery.slimer 的使用教程，希望能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2b81e8991b448dae1b