https://github.com/pau1fitz/react-slideshow
React Slideshow Component
https://github.com/pau1fitz/react-slideshow
ecmascript6 javascript react
Last synced: about 1 month ago
JSON representation
React Slideshow Component
- Host: GitHub
- URL: https://github.com/pau1fitz/react-slideshow
- Owner: Pau1fitz
- Created: 2017-07-31T11:55:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-03T20:04:58.000Z (almost 9 years ago)
- Last Synced: 2025-04-04T03:28:12.515Z (about 1 year ago)
- Topics: ecmascript6, javascript, react
- Language: JavaScript
- Homepage: https://pau1fitz.github.io/slideshow/
- Size: 2.94 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
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` |
| slideInterval={2000}| 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={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` | 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
var 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
var Slideshow = require('react-slidez');
```
## License
[MIT License](https://opensource.org/licenses/MIT)
Copyright (c) 2017 Paul Fitzgerald.