# react-smart-slider

> Super light-weight, easy to use React JS smart slider

Latest version **0.1.2** (published 2019-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-smart-slider
pnpm add react-smart-slider
yarn add react-smart-slider
bun add react-smart-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.2 |
| Published | 2019-10-06 |
| First published | 2019-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 36.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Rajesh kumar |
| Maintainers | therkverma |
| Keywords | react, slider, gallery, slideshow, react-smart-slider, react-slider, react-gallery, react-slideshow, image slider, image gallery, animated slider |

## Links

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

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.7.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.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.2 (latest) — 2019-10-06
- 0.1.1 — 2019-08-25
- 0.1.0 — 2019-04-11
- 0.0.9 — 2019-02-07
- 0.0.8 — 2019-01-26
- 0.0.7 — 2019-01-17
- 0.0.6 — 2019-01-16
- 0.0.5 — 2019-01-13
- 0.0.4 — 2019-01-12
- 0.0.3 — 2019-01-11
- 0.0.2 — 2019-01-11
- 0.0.1 — 2019-01-06

## README

# react-smart-slider

[![npm version](https://img.shields.io/npm/v/react-smart-slider.svg)](https://www.npmjs.com/package/react-smart-slider)
[![downloads](https://img.shields.io/npm/dt/react-smart-slider.svg)](https://www.npmjs.com/package/react-smart-slider)
[![dependencies](https://david-dm.org/therkverma/react-smart-slider.svg)](https://david-dm.org/therkverma/react-smart-slider)
[![devDependencies](https://david-dm.org/therkverma/react-smart-slider/dev-status.svg)](https://david-dm.org/therkverma/react-smart-slider?type=dev)


Super light-weight, easy to use React JS smart slider

[Demo](https://github.com/therkverma/react-smart-slider/) - [Codesandbox Playground](https://codesandbox.io/s/jpo4ypo9wv)

![Preview](https://res.cloudinary.com/therkverma-github-io/image/upload/fl_apng/v1547741460/react-smart-slider.png)

### Installation

```sh
npm install react-smart-slider
```

### Overview

#### Smart slider:

```javascript
React.render(<SmartSlider slides={slidesArray} autoSlide={true} />, document.body);
```

Now you can style it as you want. Checkout the [Codesandbox Playground](https://codesandbox.io/s/jpo4ypo9wv) example to see how.

### Properties

##### slides {slidesArray}

Example:-
```javascript

// DummyCaption component for example
const DummyCaption = ({ caption }) => (
  <div style={{
    position: 'absolute',
    right: 100,
    top: 250,
    fontSize: 38,
    padding: 55,
    border: 'solid 1px',
  }}>
    {caption}
  </div>
)

const slidesArray = [
      {
        url: "https://i.imgur.com/7u8i7L1.jpg",

        // (Optional) Set if you want to add any content on your slide
        childrenElem: <DummyCaption caption="Caption 1" />
      },
      {
        url: "https://i.imgur.com/E8gkF2f.jpg",
        childrenElem: <DummyCaption caption="Caption 2" />
      },
      {
        url: "https://i.imgur.com/t2a1zLi.jpg",
        childrenElem: <DummyCaption caption="Caption 3" />
      },
    ];
```
slidesArray is the set of images, that you want to add, caption title value is optional, if you don't want to show caption on image then leave it blank.
    If you want to add some content on slide then pass component on `childrenElem` key of slide's object, otherwise leave it blank.


##### childrenElem {component} (Optional)

The `childrenElem` is used for add content over the slide. if you want to add some content over the layer, then create `childrenElem` key.

##### showIndicators {boolean} default: true

The image slider's indicator will be visible or not.

##### height {number} default: 500

The height of slide container, by default it is 500.


##### autoSlide {boolean} default: false

Set true if you want to autoScroll slider image, by default it is false.


##### autoSlideInterval {number} default: 3000

Set autoSlideInterval value for autoScroll. By default it will be 3000ms. It is minimum time period you can set more than default time value.


##### buttonShape {string} default: square

Set buttonShape value for Next/Previous button. You can choose with two options, `round` and `square`. By default it is `square`.


### License

See the [License](LICENSE) file.

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