An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
4 steps to add cool sliders to your website
Lets 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. Thats it for today, until next time, have a good day.
Keep developing
Shrey
iHateReading
Original Link: https://dev.to/shreyvijayvargiya/4-steps-to-add-cool-sliders-to-your-website-2cp3
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To