让我们开始吧,不要浪费太多时间,只需 4 个步骤即可将如图所示的滑块添加到您的 React 项目中。我将使用react-awesome-slider包。

01

安装包

我正在使用 nextjs 存储库,您可以从这里下载。使用 yarn 或 npm 安装包。

yarn add react-awesome-slider

进入全屏模式 退出全屏模式

02

从包中导入 AnimationSlider 组件

就像解释的那样简单,导入将具有滑动功能的组件。这个组件叫做 AwesomeSlider。

import AwesomeSlider from "react-awesome-slider";

进入全屏模式 退出全屏模式

03

在 root 中导入我们想要使用的 CSS 动画类型并将其传递给 AnimationSlider 组件。

我正在使用 nextjs,所以我将在全局中添加 CSS 动画,即在 _app.js 文件中

import "react-awesome-slider/dist/styles.css";
import "react-awesome-slider/dist/custom-animations/fall-animation.css";

进入全屏模式 退出全屏模式

04

添加滑块子图像或文本

您可以使用文本或图像作为子滑块。另外,传递你想要使用的动画,我想看到 cubeAnimation,所以我把它作为动画道具传递了。

import React from "react";
import AwesomeSlider from "react-awesome-slider";
const HomePage = () => {
 return (
  <AwesomeSlider animation="fallAnimation">
   <div data-src="/nextlogo.png" />
   <div data-src="/twitter-green.png" />
   <div data-src="/unsplash.png" />
  </AwesomeSlider>
 )
};
export default HomePage;

进入全屏模式 退出全屏模式

结论

最后,react-awesome-slider 提供了 5 种类型的动画,例如立方体、下降、折叠、打开和缩放动画。今天就这样,直到下一次,祝你有美好的一天。

代码仓库

继续发展

信用

iHateReading