介绍
@egjs/flicking 是一款前端轮播图插件，基于 Vanilla JS 编写，轻量、灵活、易用，支持无限循环滚动、响应式布局、自定义动画等功能。
它可以用来展示图片、广告、产品等轮播内容，在网站、移动应用、桌面应用等场景中经常被使用。
如果你想在你的项目中使用轮播图，那么 @egjs/flicking 是一个不错的选择。
安装
可以使用 npm 或 yarn 进行安装：
npm install @egjs/flicking
yarn add @egjs/flicking
快速开始
引入
在 HTML 文件中引入 @egjs/flicking 的 CSS 和 JS 文件：
<!-- CSS --> <link rel="stylesheet" href="node_modules/@egjs/flicking/dist/flicking.css"> <!-- JS --> <script src="node_modules/@egjs/flicking/dist/flicking.min.js"></script>
HTML 结构
在 HTML 文件中添加轮播图的结构：
-- -------------------- ---- -------
---- -----------------
---- --------------------------
---- ------------------------
---- ---------------------------- -------
---- ---------------------------- -------
---- ---------------------------- -------
------
------
------其中：
.flicking：最外层容器，用于初始化Flicking对象。.flicking-viewport：可视区域，用于控制显示区域的尺寸和位置。.flicking-camera：相机，所有.flicking-panel的容器，用于设置轮播图的总宽度。.flicking-panel：每个轮播元素的容器，可以添加图片、文字等内容。
JavaScript 初始化
在 JavaScript 文件中初始化 Flicking：
const flicking = new eg.Flicking(".flicking");至此，一个基本的轮播图就完成了。
配置
@egjs/flicking 提供了一系列的配置选项，可以让你根据自己的需求进行自定义。
核心配置项
horizontal: (boolean, default:true)：是否横向滚动。circular: (boolean, default:false)：是否无限循环滚动。bound: (boolean, default:false)：是否限制滚动边界。boundSize: (number|string, default:0)：边缘范围的尺寸，可以设置数字或百分比。adaptive: (boolean, default:false)：是否响应式布局，即根据父容器的尺寸来自动调整轮播元素的尺寸。autoResize: (boolean, default:false)：是否自动调整大小，即当尺寸发生变化时，自动重新计算位置和尺寸。moveType: (string, default:snap)：滚动动画类型，包括snap、freeScroll、snapFreeScroll。duration: (number, default:500)：动画过渡时间。ease: (string, default:"cubic-bezier(0.25, 0.1, 0.25, 1.0)")：动画过渡函数。deceleration: (number, default:0.0075)：动画减速度。inputType: (Array<string>|string, default:[ "touch", "mouse" ])：触发滚动的操作类型。threshold: (number, default:40)：触发滚动的阈值。iOSEdgeSwipeThreshold: (number, default:30)：iOS 边缘滚动阈值。preventClickOnDrag: (boolean, default:true)：是否在拖动时禁用点击事件。
回调函数
beforeMove: ((e: FlickingEvent) => void, default:null)：移动前的回调函数。moved: ((e: FlickingEvent) => void, default:null)：移动后的回调函数。willChangeEvent: ((e: WillChangeEvent) => void, default:null)：将发生变化的回调函数。changedEvent: ((e: ChangedEvent) => void, default:null)：变化后的回调函数。moveStart: ((e: FlickingEvent) => void, default:null)：开始移动时的回调函数。move: ((e: { delta: number, axis: "flick"|"dimmension"|"scroll" }, state: State) => void, default:null)：移动时的回调函数。moveEnd: ((e: FlickingEvent) => void, default:null)：结束移动时的回调函数。
方法
@egjs/flicking 提供了一些实用的方法，可以让你在代码中对轮播图进行控制和操作。
goTo(index: number, duration?: number, event?: boolean)
移动到指定索引的轮播元素。
index：索引。duration：过渡时间。event：是否触发事件。
getNextElement(): HTMLElement
获取下一个轮播元素。
getPrevElement(): HTMLElement
获取上一个轮播元素。
getCurrentElement(): HTMLElement
获取当前轮播元素。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------- ------------
----- ---------------- -----------------------------------------------------
-------
--------------- -
------ -----
------- ------
----------------- -----
-------- -----
---------------- -------
------------ -------
---------- ----
-
------------------------------- -
----------------- -----
-
--------
-------
------
---- -----------------
---- --------------------------
---- ------------------------
---- ---------------------------- -------
---- ---------------------------- -------
---- ---------------------------- -------
------
------
------
------- ----------------------------------------------------------------
--------
----- -------- - --- ------------------------ -
----------- -----
--------- -----
--------- ----
---------- --------- --------
---
---------
-------
-------这样，就可以在网页中显示一个基本的轮播图了。可以通过调整配置选项和添加回调函数来实现更多自定义的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcbb1b5cbfe1ea061265f