前言
在前端开发中，我们经常需要使用到轮播功能，并且一般都需要自定义控制指示器。react-slide-indexer 就是一个便捷的 npm 包，让我们可以快速简单地实现轮播和指示器控制功能。
安装
使用 npm 安装：
npm install react-slide-indexer --save
引入
在需要使用 react-slide-indexer 的页面或组件中引入
import Slider from "react-slide-indexer"; import "react-slide-indexer/dist/styles.css";
用法
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------------
------ --------------------------------------
----- --- - -- -- -
------ -
--------
--------- ----------------- -------------
--------- ----------------- -------------
--------- ----------------- -------------
---------
--
-
------ ------- ----Props
| Props 属性名 |
Type 类型 |
Default 默认值 |
Required 是否必填 |
Description 描述 |
|---|---|---|---|---|
| autoplayspeed | number | 3000 | No | 自动播放间隔的毫秒数 |
| indicators | bool | true | No | 是否显示指示器 |
| arrows | bool | true | No | 是否显示箭头按钮 |
| slidesPerView | number | 1 | No | 每次滑动显示的幻灯片数量 |
| animationDuration | number | 500 | No | 动画过渡时间，单位毫秒 |
| hideScrollbar | bool | false | No | 是否隐藏滚动条 |
| easing | string | ease | No | 过渡动画函数 |
| loop | bool | true | No | 是否启用循环播放 |
| keyboardControl | bool | true | No | 是否启用键盘控制 |
| mousewheelControl | bool | false | No | 是否启用鼠标滚轮控制 |
| grabCursor | bool | false | No | 是否启用鼠标手势 |
| onTouchStart | func | No | 触发滑动开始事件 | |
| onTouchEnd | func | No | 触发滑动结束事件 | |
| beforeSlideChange | func | No | 幻灯片滑动前事件的回调 | |
| afterSlideChange | func | No | 幻灯片滑动后事件的回调 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------------
------ --------------------------------------
----- --- - -- -- -
------ -
-------
--------------------
-----------------
-------------
-----------------
-----------------------
-------------------
-----------
----------------------
-------------------------
------------------
---------------- -- ------------------ --------
-------------- -- ------------------ ------
--------------------- -- ------------------- ----- ---------
-------------------- -- ------------------ ----- ---------
-
--------- ----------------- -------------
--------- ----------------- -------------
--------- ----------------- -------------
---------
--
-
------ ------- ----结语
通过本文的学习，相信大家已经掌握了 react-slide-indexer 这个 npm 包的使用方法，实现了轮播和指示器控制功能，可以在自己的项目中使用它来方便快捷地实现相应功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663181e8991b448e21f0