0.1.8 • Published 3 years ago
react-moving-slider v0.1.8
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.
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 |