React Moving Slider

A simple React component that displays your images using CSS animations and transitions.

It supports click events for sliding and moving through an array of images.

Demo here

Installation

run npm install react-moving-slider and then, in your component import MovingSlider from 'react-moving-slider'

Usage

The basic setup for a slider is

import React from "react"
import MovingSlider from 'react-moving-slider'

function App() {
  return (
    <MovingSlider
        images={[
            "https://picsum.photos/1200/1500?random=1",
            "https://picsum.photos/1200/1500?random=2",
            "https://picsum.photos/1200/1500?random=3",
        ]}
    />
  )
}

You can of course change the array values to be your images URLs

Options

Option Name	Type	Description	Default Value	Required
minHeight	number	the minimal height that one column can reach (in percentage and relative to the parent container)	20	No
maxHeight	number	the maximal height that one column can reach (in percentage and relative to the parent container)	100	No
images	Array	the array of images to be passed as "background-image" value, if more than 1 is provided, the handleSlide method will handle the transition between images on click	[]	Yes
numColumns	number	the number of columns to be displayed as div with the background fixed image	30	No
smartphoneNumColumns	number	the number of columns to be displayed as div with the background fixed image on a smartphone screen	15	No
fixedHeight	number	If provided, the slider will ignore it's parent height and will use this value in pixels insted	null	No
fixedWidth	number	If provided, the slider will ignore it's parent width and will use this value in pixels insted	null	No
speed	number	The speed of the looped animation in seconds	3	No