介绍
awesome-react-slick 是一个基于 react 的轮播组件，它集成了 Slick 幻灯片库，并为我们提供了高可定制化的轮播组件，我们可以根据自身的实际需求，定制属于自己的轮播组件。
安装
运行下面的命令，我们就可以安装 awesome-react-slick：
npm install awesome-react-slick --save
这行命令会为我们下载 awesome-react-slick，并将其作为项目的依赖包存储在项目 node_modules 文件夹中。如果我们使用的是 yarn 包管理器，也可以通过 yarn 来安装这个包：
yarn add awesome-react-slick
使用
使用 awesome-react-slick 可以非常简单。我们只需按照 React 组件的方式引入 awesome-react-slick，根据我们的需求传入相应的 props 即可。下面是一个基本的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------------
----- -------- ------- --------------- -
-------- -
----- -------- - -
----- -----
--------- -----
------ ----
------------- --
--------------- -
--
------ -
-----
---------- ---------
------- --------------
-----
----------
------
-----
----------
------
-----
----------
------
-----
----------
------
-----
----------
------
-----
----------
------
---------
------
--
-
-在这个示例中，我们创建了一个名为 MySlider 的组件，该组件实现了一个基础的轮播效果。我们在这里传入了一组 div 元素，这些 div 元素中包含了一些用于展示的数据。我们也在 settings 参数中设置了一些基础的属性，这些属性控制了轮播的基本行为（例如轮播速度、轮播方式等等）。
定制化
awesome-react-slick 提供了非常多的属性、方法和事件钩子，用于我们对轮播组件的定制。下面是一些常用的属性：
属性
className
用于指定轮播组件的 CSS 类名。
<Slider className="my-slider" ...>
adaptiveHeight
在每次切换轮播图时自动调整轮播组件的高度。
<Slider adaptiveHeight={true} ...>arrows
是否显示左右箭头。
<Slider arrows={false} ...>centerMode
是否开启居中模式。
<Slider centerMode={true} ...>centerPadding
仅在开启居中模式时生效，用于设置轮播项左右两侧的间隔。
<Slider centerPadding="60px" ...>
dots
是否显示轮播小圆点。
<Slider dots={true} ...>draggable
是否允许通过鼠标拖拽轮播组件。
<Slider draggable={false} ...>fade
是否开启淡入淡出效果。
<Slider fade={true} ...>infinite
是否开启无限轮播。
<Slider infinite={true} ...>initialSlide
初始化时显示的轮播项序号。
<Slider initialSlide={2} ...>lazyLoad
是否开启懒加载。
<Slider lazyLoad={true} ...>pauseOnDotsHover
是否在鼠标悬停在小圆点上时停止轮播。
<Slider pauseOnDotsHover={true} ...>responsive
用于设定不同屏幕尺寸下的轮播样式。具体写法如下：
-- -------------------- ---- -------
-------
-------------
-
----------- -----
--------- -
------------- --
--------- -----
--
--
-
----------- ----
--------- -
------------- --
----- ------
--
--
-
----------- ----
--------- -
------------- --
----------- -----
--
--
--
----在这个示例中，我们设置了三个 breakpoint，分别对应于不同的屏幕尺寸。在每个 breakpoint 中，我们又设置了一些特定的属性，这些属性会在对应的屏幕尺寸下生效。
swipe
是否允许通过触摸拖拽轮播组件。
<Slider swipe={false} ...>其他还有更多的属性可以通过在 GitHub 上查阅文档来获取更多信息。
事件
awesome-react-slick 也提供了多个事件钩子，这些事件钩子允许我们在不同的状态下调用一些自定义函数。下面是一些常用的事件钩子：
beforeChange
这个事件会在轮播项切换之前调用，我们可以在这里执行一些准备工作。这个事件的回调函数接收三个参数：
- 目标轮播项的索引号
- 现在的轮播项的索引号
- 当前的轮播组件对象实例
<Slider
beforeChange={(target, current, slider) => {
console.log(`当前项：${current}, 目标项：${target}`);
}}
...>afterChange
这个事件会在轮播项切换结束后调用，我们可以在这里执行一些清理工作。这个事件的回调函数接受一个参数，当前轮播项的索引号。
<Slider
afterChange={current => {
console.log(`当前项：${current}`);
}}
...>其他还有更多的事件可以通过在 GitHub 上查阅文档来获取更多信息。
结语
awesome-react-slick 是一个十分优秀的轮播组件，它为我们提供了非常灵活和高度可定制化的组件，使我们可以根据自己的实际需求快速地实现一个自己风格的轮播组件。但他也有他的一些限制，比如复杂组件的实现不太友好，这个时候需要根据实际情况使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005772581e8991b448eac61