介绍
@isoden/ngx-swipe 是一个基于 Angular 开发的轮播图组件。它是一个轻量级插件，易于使用并且高效。此插件的最大优点在于其简洁的 API 和易于自定义的外观。
安装
在命令行中输入
npm i @isoden/ngx-swipe --save安装此插件。在 app.module.ts 中添加以下内容：
------ - -------------- - ---- -------------------- ----------- -------- - -------------- - -- ------ ----- --------- - -
使用方法
在 HTML 文件中添加
<ngx-swipe>标签，将需要滑动的元素放入标签内：----------- -------------- -------------- -------------- -------------- ------------
在 app.component.ts 中导入 ViewChild，并在 ngAfterViewInit 函数内声明：
------ - ---------- ---------- ------------- - ---- ---------------- ------ - ----------------- - ---- -------------------- ------ ----- ------------ ---------- ------------- - ----------------------------- ------- ------------------ ----------------- - -------------------- ------ ---- --------- ----- --------- ---- --- - -在 app.component.html 中添加
<ngx-swipe>标签，并设置 id 和 config：---------- ------- ----------- ------------------ -------------- -------------- -------------- -------------- ------------
参数配置
| 参数名 | 类型 | 说明 |
|---|---|---|
| speed | number | 切换速度，单位为毫秒，默认为 300 |
| autoPlay | boolean | 是否自动播放，默认为 false |
| interval | number | 自动播放间隔，单位为毫秒，默认为 3000 |
| effect | string | 切换效果，可选 slide（滑动切换）和 fade（淡入淡出），默认为 slide |
| pagination | boolean | 是否显示分页器，默认为 true |
| navigation | boolean | 是否显示上一页/下一页按钮，默认为 true |
| slidesPerView | number | 每屏显示数量，可以是小数，默认为 1 |
事件列表
| 事件名 | 说明 |
|---|---|
| beforeChange | 图片切换前触发 |
| afterChange | 图片切换后触发 |
| touchStart | 触屏开始时触发 |
| touchMove | 触屏滑动时触发 |
| touchEnd | 触屏结束时触发 |
| transitionStart | 图片切换过程开始时触发 |
| transitionEnd | 图片切换过程结束时触发 |
| click | 点击当前图片时触发 |
示例代码
HTML 文件：
---- -------------------------
---------- ------------------
---- -------------------- ----------- ---- -- -------
---- -------------------
------
------------
---- --------------------------------
------TypeScript 文件：
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------- -------------- - -
----------- ---------------------
-------------------- -----
----------- ----------------------
----------- ----------------------
------------- --
--
----- - -
- ---- --------------------------------------- --
- ---- --------------------------------------- --
- ---- --------------------------------------- --
- ---- --------------------------------------- -
--
------------- - -
---------- -
-
-此插件的详细使用方法已经介绍完成。希望您喜欢这个插件！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056ea281e8991b448e76c4