Installation

↓

Run

npm install react-moving-slider

Then, in your component, import at the top with

import MovingSlider from 'react-moving-slider'

Basic Setup

↓

The most basic setup is: 

<MovingSlider
  images={[
    "https://picsum.photos/800/500?random=10",
    "https://picsum.photos/800/500?random=11",
    "https://picsum.photos/800/500?random=12",
  ]}
/>
This will setup the viewer with a basic slider, given a parent with a known width and height

↗

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. Scroll down to learn more.

Dynamic Example

Output:


<MovingSlider
    numColumns={30}
    maxHeight={100}
    minHeight={30}
    speed={3}
    images={["https://picsum.photos/id/424/800/500","https://picsum.photos/id/223/800/500","https://picsum.photos/id/111/800/500"]}
/>

How to use it

The options for the slider are:

  • minHeight: number : the minimal height that one column can reach (in percentage and relative to the parent container)
  • maxHeight: number : the maximal height that one column can reach (in percentage and relative to the parent container)
  • 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
  • numColumns: number : the number of columns to be displayed as div with the background fixed image
  • smartphoneNumColumns: number : the number of columns to be displayed as div with the background fixed image on a smartphone screen
  • fixedHeight: number : if provided, the fixed height in pixel that the slider will have
  • fixedWidth: number : if provided, the fixed width in pixel that the slider will have
  • speed: number : the animation speed in second

minHeight

number

An example with a minimun height of 50% given a parent container with an height of 300px.

Default value : 20

maxHeight

number

An example with a maximum height of 50% given a parent container with an height of 300px.

Default value : 100

numColumns

number

The number of columns that should be created for visualizing the images (on desktop). In this example, the numColumns value is set to 5

Default value : 30

images

Array

They array or URLs for the image source to be displayed as background image for each slide. In this documentation, all of the images are taken from Picusm Photos.
If more than 1 image is provided, the slider will automatically include the onClick event to slide between those values.

Default value : null

smartphoneNumColumns

number

The number of columns that should be created for visualizing the images (on smartphone). In this example, the smartphoneNumColumns value is set to 5

Default value : 15

fixedHeight

number

If provided, the slider will ignore it's parent height and will use this value in pixels insted. In this example, the fixedHeight value is set to 100px.

Default value : null

fixedWidth

number

If provided, the slider will ignore it's parent height and will use this value in pixels insted. In this example, the fixedWidth value is set to 200px.

Default value : null

speed

number

The speed in seconds of the animation of the slider.
In this example the speed is set to 10 seconds.

Default value : 3