React Slidez
Demo
💪
Live demo
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
const Slideshow = require("react-slidez");
<Slideshow
showIndex
showArrows
autoplay
enableKeyboard
useDotIndex
slideInterval={2000}
defaultIndex={1}
slides={["1.jpg", "2.jpg"]}
effect="fade"
height="100%"
width="100%"
/>You can also pass other components to the Slideshow component as children. All the same properties as above are available.
const Slideshow = require("react-slidez");
<Slideshow>
<ComponentOne />
<ComponentTwo />
<Checkout />
</Slideshow>License
Copyright (c) 2017 Paul Fitzgerald