4 steps to add cool sliders to your website

Let’s start without wasting much time, 4 steps to add a slider as shown in the image to your react project. I will be using the react-awesome-slider package.

01

Install the package
I am using the nextjs repository, which you can download from here. Install the package using yarn or npm.

yarn add react-awesome-slider

02

Import the AnimationSlider component from the package

Simple as explained, import the component that will have slide functionality. This component is called AwesomeSlider.

import AwesomeSlider from "react-awesome-slider";

03

Import the type of CSS animation we want to use in root and pass it to the AnimationSlider component.

I am using nextjs, so I will add the CSS animation in globally i.e. in the _app.js file

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

04

Add the slider children either images or text

You can use text or images as the slider children. Also, pass the animation you want to use, I want to see cubeAnimation so I have passed that as the animation prop.

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;

Conclusion
Lastly, react-awesome-slider provides 5 types of animations such as cube, fall, fold-out, open and scale animation. That’s it for today, until next time, have a good day.

Code repository

Keep developing
Shrey
iHateReading