A simple image slideshow components with react.js
npm install react-image-slideshow
react-image-slideshow
=====================
shell
git clone https://github.com/Caldis/react-image-slideshow
cd react-image-slideshow
npm install
npm run dev
open http://127.0.0.1:8080/
`
Installation
`shell
npm install react-image-slideshow react-portal tween.js --save
`
Usage
$3
`jsx
import SlideShow from 'react-image-slideshow';
`
$3
`jsx
constructor(props){
super(props);
this.state = {
imgsData:[
{
url: 'http://ww3.sinaimg.cn/large/d8e32accgw1f6c55xxgp2j20zk0qodry.jpg'
},
{
url: 'http://ww1.sinaimg.cn/large/d8e32accgw1f69b7ifm4gj20qo0qon3e.jpg'
},
{
url: 'http://ww1.sinaimg.cn/large/d8e32accgw1f62keeub2uj21kw2dc4pa.jpg'
}
]
}
}
`
$3
`jsx
render() {
return (
);
}
`
$3
`jsx
handleSlideshowOpen(index) {
this.refs.SlideShow.handleModalOpen(index);
}
`
Documentation - props
$3
#### props : imgs
A Array contain several object of images detail
`jsx
[
{
url: 'http://ww3.sinaimg.cn/large/d8e32accgw1f6c55xxgp2j20zk0qodry.jpg'
},
{
url: 'http://ww1.sinaimg.cn/large/d8e32accgw1f69b7ifm4gj20qo0qon3e.jpg'
},
{
url: 'http://ww1.sinaimg.cn/large/d8e32accgw1f62keeub2uj21kw2dc4pa.jpg'
}
]
`
#### props : ref
Ref the components to call the "handleModalOpen()" method.
`jsx
`
#### func : handleModalOpen(index)
##### Pass in the index num to control the initial image in the slideshow
`jsx
handleSlideshowOpen(index) {
this.refs.SlideShow.handleModalOpen(index);
}
render() {
return (
);
}
`
$3
#### lazyLoad: bool
##### default: true
Save the network
#### infinitySwitch: bool
##### default: true
If false, the image will back to head after you view to end.
#### downloadButton: bool
##### default: true
If false, the download button will not show.
#### zoomButton: bool
##### default: true
If false, the zoom button will not show.
#### indicator: bool
##### default: true
If false, the sequence indicator of image will not show.
Tips & Tricks
- You can use the Up/Down/Left/Right to control the image slide.
- The ESC can quit the slideshow overlay too.
- If the `handleModalOpen([index])` method not receive the index prop, it will show the first image in 'imgs'.
Dependencies
- `react-portal` (https://github.com/tajo/react-portal)
- `tween.js` (https://github.com/CreateJS/TweenJS)
On the road
- Image with Title/text overlay
- More transition animate
- Non dependence
- Thumbnails
##Changelog
- 1.2.2
Fix the import error - Now you can easy to import this components from this lib
Fix the no imgs prop err - Now the component will not crush when it's no receive 'imgs' prop
- 1.2.7
Fix the Action Bar always display problems
Fix the error in IE
Add loading animation
Credit
- Special thank image of example pages from `森画谨制``(http://weibo.com/senhuahua)