# react-moving-slider

> A simple React component for a different slider visualization

Latest version **0.1.8** (published 2021-09-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-moving-slider
pnpm add react-moving-slider
yarn add react-moving-slider
bun add react-moving-slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2021-09-10 |
| First published | 2021-09-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Michelangelo Alesi |
| Maintainers | michintosh |
| Keywords | react, moving-slider, slider, dynamic |

## Links

- npm: https://www.npmjs.com/package/react-moving-slider
- Repository: https://github.com/michintosh/react-moving-slider
- Homepage: https://github.com/michintosh/react-moving-slider#readme
- Issues: https://github.com/michintosh/react-moving-slider/issues
- npm.io page: https://npm.io/package/react-moving-slider

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^17.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.8 (latest) — 2021-09-10
- 0.1.7 — 2021-09-07
- 0.1.6 — 2021-09-07
- 0.1.5 — 2021-09-07

## README

# 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](https://michelangeloalesi.it/react-moving-slider)

![React Moving Slider Example](https://i.ibb.co/py78b0b/react-moving-slider.gif)


# 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

---
_Source: https://npm.io/package/react-moving-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._