首页

# 初识 React Slick

react-slick 是一个 React 组件库，用于创建响应式的轮播组件。它基于 Slick Carousel 库，提供了丰富的 API 和灵活的配置选项，让我们可以轻松地在 React 应用中实现各种滑动效果。

因为官方貌似没有出中文文档，所以就自行翻译了一版，如有问题欢迎指出～

# 快速上手

  1. 安装 React-Slick

    • npm 安装：npm install react-slick --save
    • yarn 安装：yarn add react-slick

  2. 安装轮播组件样式

    • npm install slick-carousel --save

  3. 引用样式文件

重要：如果不引用 css 文件是没有动效的

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

# API

React-Slick 提供了许多配置项，以下是一些常用的配置参数：

  1. accessibility：启用标签和箭头键导航，默认为 true 。
  2. adaptiveHeight：是否根据内容高度自适应轮播的高度。
  3. afterChange：索引改变回调。默认为 (currentSlide: number) => {}
  4. appendDots：定制导航点，类似于 customPaging 。默认为 dots => <ul>{dots}</ul>
  5. arrows：是否显示箭头导航。默认为 true 。
  6. asNavFor：提供 ref 到另一个滑块并与当前滑块同步。
  7. autoplaySpeed：自动播放的速度，单位为毫秒，默认为 3000 。
  8. autoplay：是否自动播放，默认为 false 。
  9. beforeChange：索引改变回调。默认为 (currentSlide: number, nextSlide: number) => {}
  10. centerMode：中心显示当前幻灯片。默认为 false 。
  11. centerPadding：中心模式下的幻灯片间距。默认为 50px 。
  12. className：CSS 类名。
  13. customPaging：自定义分页模板。默认为 (index: number) => <button>{index + 1}</button>
  14. dotsClass：dots 的 CSS 类名。
  15. dots：是否显示底部导航点。
  16. draggable：启用可拖在桌面上滚动。默认为 true 。
  17. easing：动画缓动效果。
  18. fade：是否使用渐隐效果。
  19. focusOnSelect：点击响应幻灯片。
  20. infinite：是否无限循环播放，默认为 true 。
  21. initialSlide：初始显示的幻灯片索引。默认为 0
  22. lazyLoad：按需加载图片或组件。 "ondemand" | "progressive"
  23. onEdge：有限情况下的边缘拖拽事件。 (swipeDirection: SwipeDirection) => {}
  24. onInit：componentWillMount 回调。
  25. onLazyLoad：幻灯片懒加载后的回调。
  26. onReInit：componentDidUpdate 回调。
  27. onSwipe：滑动幻灯片后回调。 (swipeDirection: SwipeDirection) => {}
  28. pauseOnDotsHover：鼠标悬停在点上时是否暂停自动播放。默认为 false 。
  29. pauseOnFocus：当幻灯片获得焦点时是否暂停自动播放。默认为 false 。
  30. pauseOnHover：鼠标悬停时是否暂停自动播放，默认为 true 。
  31. responsive：响应式配置，可以根据不同屏幕尺寸设置不同的参数。
  32. rows：滑块中每张幻灯片的行数，（启用网格模式）。默认为 1 。
  33. rtl：是否反转幻灯片顺序。默认为 false 。
  34. slide：幻灯片容器的类型。
  35. slidesPerRow：每行显示的幻灯片数量（启用网格模式）。
  36. slidesToScroll：每次滚动时切换的幻灯片数量，默认为 1 。
  37. slidesToShow：一次显示的幻灯片数量，默认为 1 。
  38. speed：切换速度，单位为毫秒，默认为 300 。
  39. swipeToSlide：允许用户直接拖动或滑动到任意幻灯片，无视 slidesToScroll 。
  40. swipe：是否启用滑动切换。默认为 true 。
  41. swipeEvent：滑动切换事件。 (swipeDirection: SwipeDirection) => {}
  42. touchMove：触摸滑动。默认为 true 。
  43. touchThreshold：触摸滑动的阈值。默认为 5 。
  44. useCSS：是否使用 CSS 过渡效果。
  45. useTransform：是否使用 CSS 变换。
  46. variableWidth：变量宽度。Examples
  47. vertical：是否启用垂直轮播模式。
  48. verticalSwiping：垂直滑动
  49. waitForAnimate：等待动画。

方法

  1. slickGoTo：跳转到指定索引幻灯片，如果 dontAnimate=true，它会在没有动画的情况下发生。 (slideNumber: number, dontAnimate?: boolean) => {}
  2. slickNext：下一张幻灯片
  3. slickPause：暂停自动播放
  4. slickPlay：启动自动播放
  5. slickPrev：回到上一张幻灯片

<!-- TODO 有人想看 demo 再出 -->

# 总结

这是年前最后一篇文章，希望能给大家带来帮助，提前祝大家新年快乐～