Implement Animated Slider In ReactJS

In this article, we will implement react-animated-slider in react js.

First, we should install react-animated-slider in our application

npm i react-animated-slider

Import this package into our application

import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';

You can see how to implement react-animated-slider

import React from 'react'
import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';
import image1 from './../assets/image1.jpg'
import image2 from './../assets/image2.jpg'
import image3 from './../assets/image3.jpg'

export default function sliderAnimation() {
    return (
            <img src={image1} />
            <img src={image2} />
            <img src={image3} />

Here is a list of props you can give the component.

the slide’s index, which will be shown first.
milliseconds representing the animation’s duration. After the transition is finished, it is used to remove the animateIn and animateout classNames and assign current.
Turn off the slider navigation
Slides can be cycled through infinitely. The setting for this option will be false for sliders with just two children.
Time between plays in milliseconds. The slider won’t play automatically if it’s left blank. For the purpose of preventing the elements from slipping away when the user wishes to click them, the timer will be halted and reset during user events like mouse over or touch.
disable the use of touch events for slider navigation
Minimum swipe distance in pixels required to launch a navigation event
renders inside of the previous button.
will be displayed inside the following button.
the object that will be applied to the slides and represents the CSS classNames.
called after the conclusion of a slide change animation. receives an object as argument, with the new slide index:

You can see below the output

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories