Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Pau1fitz/react-slidez
React Slideshow Component ➡️ ⬅️ ⬆️ ⬇️
https://github.com/Pau1fitz/react-slidez
es6 javascript react
Last synced: 12 days ago
JSON representation
React Slideshow Component ➡️ ⬅️ ⬆️ ⬇️
- Host: GitHub
- URL: https://github.com/Pau1fitz/react-slidez
- Owner: Pau1fitz
- License: mit
- Created: 2017-08-01T10:21:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-22T22:46:28.000Z (over 1 year ago)
- Last Synced: 2024-10-29T20:06:39.227Z (12 days ago)
- Topics: es6, javascript, react
- Language: JavaScript
- Homepage: https://pau1fitz.github.io/react-slidez/
- Size: 993 KB
- Stars: 211
- Watchers: 5
- Forks: 25
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Slidez
✨
Customisable React Slideshow component.✨
## Demo
💪
[Live demo](http://pau1fitz.github.io/react-slidez/)
💪
## Installation
```
npm install react-slidez --save
```
### Properties
| Property | Description | Type | Default |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- |
| showIndex | Show the index of the current slide | Boolean | `false` |
| showArrows | Show arrows to navigate through the slides | Boolean | `true` |
| autoplay | Select whether you want the slideshow to autoplay or not | Boolean | `true` |
| enableKeyboard | Select whether you want to allow the user change the slides with the keyboard | Boolean | `true` |
| useDotIndex | Select whether you want the index to be dots or numbers | Boolean | `false` |
| slideInterval | Dictate the speed in ms at which the slides change | Integer | `2000` |
| defaultIndex | Choose the index that you wish to start at | Integer | `0` |
| slides | The slides you pass into the component. This can be an array of images, or other components which are passed as children. See example below. | Array | No default |
| effect | Choose the animation effect of your slideshow. Options include `fade`, `left`, `top`, `right`, `bottom`, `bounce-right`, `bounce-left` | String | `"fade"` |
| height | Choose the height of the slideshow. Example `height={'50px'}` or `height={'50%'}` | String | `"100%"` |
| width | Choose the width of the slideshow. Example `width="50px"` or `width="50%"` | String | `"100%"` |
## Usage
```js
const Slideshow = require("react-slidez");
```
You can also pass other components to the `Slideshow` component as children. All the same properties as above are available.
```js
const Slideshow = require("react-slidez");
```
## License
[MIT License](https://opensource.org/licenses/MIT)
Copyright (c) 2017 Paul Fitzgerald