# 初识 React Slick
react-slick 是一个 React 组件库，用于创建响应式的轮播组件。它基于 Slick Carousel 库，提供了丰富的 API 和灵活的配置选项，让我们可以轻松地在 React 应用中实现各种滑动效果。 因为官方貌似没有出中文文档，所以就自行翻译了一版，如有问题欢迎指出～
# 快速上手
-
安装 React-Slick
-
npm 安装：npm install react-slick --save
-
yarn 安装：yarn add react-slick
-
-
安装轮播组件样式
- npm install slick-carousel --save
-
引用样式文件
重要：如果不引用 css 文件是没有动效的
import Slider from 'react-slick'; | |
import 'slick-carousel/slick/slick.css'; | |
import 'slick-carousel/slick/slick-theme.css'; |
# API
React-Slick 提供了许多配置项，以下是一些常用的配置参数：
-
accessibility：启用标签和箭头键导航，默认为
true。 -
adaptiveHeight：是否根据内容高度自适应轮播的高度。
-
afterChange：索引改变回调。默认为
(currentSlide: number) => {} -
appendDots：定制导航点，类似于 customPaging 。默认为
dots => <ul>{dots}</ul> -
arrows：是否显示箭头导航。默认为
true。 -
asNavFor：提供 ref 到另一个滑块并与当前滑块同步。
-
autoplaySpeed：自动播放的速度，单位为毫秒，默认为
3000。 -
autoplay：是否自动播放，默认为
false。 -
beforeChange：索引改变回调。默认为
(currentSlide: number, nextSlide: number) => {} -
centerMode：中心显示当前幻灯片。默认为
false。 -
centerPadding：中心模式下的幻灯片间距。默认为
50px。 -
className：CSS 类名。
-
customPaging：自定义分页模板。默认为
(index: number) => {index + 1} -
dotsClass：dots 的 CSS 类名。
-
dots：是否显示底部导航点。
-
draggable：启用可拖在桌面上滚动。默认为
true。 -
easing：动画缓动效果。
-
fade：是否使用渐隐效果。
-
focusOnSelect：点击响应幻灯片。
-
infinite：是否无限循环播放，默认为
true。 -
initialSlide：初始显示的幻灯片索引。默认为
0 -
lazyLoad：按需加载图片或组件。
"ondemand" | "progressive" -
onEdge：有限情况下的边缘拖拽事件。
(swipeDirection: SwipeDirection) => {} -
onInit：componentWillMount 回调。
-
onLazyLoad：幻灯片懒加载后的回调。
-
onReInit：componentDidUpdate 回调。
-
onSwipe：滑动幻灯片后回调。
(swipeDirection: SwipeDirection) => {} pause -
OnDotsHover：鼠标悬停在点上时是否暂停自动播放。默认为
false。 -
pauseOnFocus：当幻灯片获得焦点时是否暂停自动播放。默认为
false。 -
pauseOnHover：鼠标悬停时是否暂停自动播放，默认为
true -
responsive：响应式配置，可以根据不同屏幕尺寸设置不同的参数。
-
rows：滑块中每张幻灯片的行数，（启用网格模式）。默认为
1。 -
rtl：是否反转幻灯片顺序。默认为
false。 -
slide：幻灯片容器的类型。
-
slidesPerRow：每行显示的幻灯片数量（启用网格模式）。
-
slidesToScroll：每次滚动时切换的幻灯片数量，默认为
1。 -
slidesToShow：一次显示的幻灯片数量，默认为
1。 -
speed：切换速度，单位为毫秒，默认为
300。 -
swipeToSlide：允许用户直接拖动或滑动到任意幻灯片，无视 slidesToScroll 。
-
swipe：是否启用滑动切换。默认为
true。 -
swipeEvent：滑动切换事件。
(swipeDirection: SwipeDirection) => {} -
touchMove：触摸滑动。默认为
true。 -
touchThreshold：触摸滑动的阈值。默认为
5。 -
useCSS：是否使用 CSS 过渡效果。
-
useTransform：是否使用 CSS 变换。
-
variableWidth：变量宽度。
-
Examples vertical：是否启用垂直轮播模式。
-
verticalSwiping：垂直滑动 waitForAnimate：等待动画。
方法
- slickGoTo：跳转到指定索引幻灯片，如果 dontAnimate=true，它会在没有动画的情况下发生。
(slideNumber: number, dontAnimate?: boolean) => {} - slickNext：下一张幻灯片
- slickPause：暂停自动播放
- slickPlay：启动自动播放
- slickPrev：回到上一张幻灯片
# 总结
这是年前最后一篇文章，希望能给大家带来帮助，提前祝大家新年快乐～
