# react-basic-slider

> A basic react slider/carousel component that uses React Hooks and styled-components and that has touch support.

Latest version **0.2.9** (published 2019-06-18) · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.9 |
| Published | 2019-06-18 |
| First published | 2019-06-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 20 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ovidiu1207 |
| Keywords | react, carousel, slider, react-slider, swipe |

## Links

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

## Dependencies (1)

- [styled-components](https://npm.io/package/styled-components.md) ^4.3.1

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.2.9 (latest) — 2019-06-18
- 0.2.8 — 2019-06-11
- 0.2.7 — 2019-06-11
- 0.2.6 — 2019-06-11
- 0.2.5 — 2019-06-11
- 0.2.4 — 2019-06-11
- 0.2.3 — 2019-06-11
- 0.2.1 — 2019-06-10
- 0.2.0 — 2019-06-10
- 0.1.9 — 2019-06-10
- 0.1.8 — 2019-06-10
- 0.1.7 — 2019-06-07
- 0.1.6 — 2019-06-07
- 0.1.5 — 2019-06-07
- 0.1.4 — 2019-06-07
- … 4 more at https://npm.io/package/react-basic-slider/versions

## README

# React Basic Slider

A basic react slider/carousel component that uses React Hooks and styled-components and that has touch support.

![alt text](https://i.imgur.com/1GXU0BR.png)

DEMO -> https://lucid-easley-d4aea3.netlify.com/

### Instalation

```bash
npm install react-basic-slider
# or
yarn add react-basic-slider
```

### Usage

Simply import the component and add some children to it

```
import Slider from 'react-basic-slider';

...

return(
  <Slider>
     <div style={{ background: "Aquamarine" }}>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. In cumque
         dicta ut aliquam dolor recusandae, dolore facilis quo. Numquam
         quibusdam aperiam nostrum, minus laborum odio provident laboriosam
         voluptatibus veritatis doloribus.
       </p>
     </div>
     <div style={{ background: "Salmon" }}>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. In cumque
         dicta ut aliquam dolor recusandae, dolore facilis quo. Numquam
         quibusdam aperiam nostrum, minus laborum odio provident laboriosam
         voluptatibus veritatis doloribus.
       </p>
     </div>
     <div
       style={{
         background: "MediumSlateBlue",
         backgroundImage:
           "url('https://images.unsplash.com/photo-1559762705-2123aa9b467f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
       }}
     />
  </Slider>
);
```

### Styling

The styling can be done using styled-components, by passing a custom className and style it directly through css or by using the `customStyles` prop.

#### Example using styled-components

```
import Slider from "react-basic-slider";

...

const CustomSlider = styled(Slider)`
  button{
    background: red;
  }
`;

...

return(
  <CustomSlider>
    <div style={{background: 'red'}}>a</div>
    <div style={{background: 'green'}}>b</div>
    <div style={{background: 'blue'}}>c</div>
  </CustomSlider>
);
```

#### Example using customStyles prop

```
import Slider from "react-basic-slider";

...

const slidesContainerStyles = {};
const mainContainerStyles = {
  background: "#e9e9e9",
  borderRadius: "10px",
  padding: "30px",
  ">p": {
    padding: "10px"
  }
};
const navigationContainerStyles = {};
const navigationButtonsStyles = {
  background: "#ccc",
  borderRadius: "1px",
  margin: "0 5px"
};
const arrowsContainerStyles = {};
const leftArrowStyles = {
  background: "grey"
};
const rightArrowStyles = {
  background: "grey"
};

...

return(
  <Slider
    customStyles={{
      mainContainer: mainContainerStyles,
      slidesContainer: slidesContainerStyles,
      navigationContainer: navigationContainerStyles,
      navigationButtons: navigationButtonsStyles,
      arrowsContainer: arrowsContainerStyles,
      leftArrow: leftArrowStyles,
      rightArrow: rightArrowStyles
    }}>
    <div style={{background: 'red'}}>a</div>
    <div style={{background: 'green'}}>b</div>
    <div style={{background: 'blue'}}>c</div>
  </Slider>
);
```

### Props

| property       | type     | default        | purpose                                                                                                           |
| -------------- | -------- | -------------- | ----------------------------------------------------------------------------------------------------------------- |
| loop           | boolean  | true           | Let's you go through the carousel again after you reach the last slider and click the next arrow                  |
| selected       | number   | 0              | Slide to display                                                                                                  |
| showArrows     | boolean  | true           | Displays the next/prev arrows                                                                                     |
| showNav        | boolean  | true           | Displays the bottom dotted navigation                                                                             |
| leftArrow      | string   | not displaying | Change the default left arrow to a custom one. Needs to be an URL that goes into the src attribute of an img tag  |
| rightArrow     | string   | not displaying | Change the default right arrow to a custom one. Needs to be an URL that goes into the src attribute of an img tag |
| arrowsPosition | string   | center         | Change the default arrow positioning. Can be center or bottom                                                     |
| customStyles   | object   | not applied    | Change the default styling.                                                                                       |
| onChange       | function | not applied    | Captures the current selected index.                                                                              |

### Note

If you're using Rollupjs and you're getting the following error or similar:

```
[!] Error: 'isValidElementType' is not exported by node_modules/react-is/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/styled-components/dist/styled-components.es.js (7:9)
```

You can fix it following the instruction here: https://github.com/styled-components/styled-components/issues/1654#issuecomment-441151140

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