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 (
        <Slider>
            <img src={image1} />
            <img src={image2} />
            <img src={image3} />
        </Slider>
    )
}

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

slideIndex
the slide’s index, which will be shown first.
duration
milliseconds representing the animation’s duration. After the transition is finished, it is used to remove the animateIn and animateout classNames and assign current.
disabled
Turn off the slider navigation
infinite
Slides can be cycled through infinitely. The setting for this option will be false for sliders with just two children.
autoplay
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.
touchDisabled
disable the use of touch events for slider navigation
minSwipeOffset
Minimum swipe distance in pixels required to launch a navigation event
previousButton
renders inside of the previous button.
nextButton
will be displayed inside the following button.
classNames
the object that will be applied to the slides and represents the CSS classNames.
onSlideChange
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 *

Subscribe

Select Categories