react-image-gallery
Responsive image gallery, slideshow, carousel
Install
npm install react-image-gallery
Demo & Examples
Live demo: linxtion.com/demo/react-image-gallery
To build the example locally, run:
npm install
gulp dev
You might need to run the following command if you do not have gulp installed globally.
npm install --global gulp
Then open localhost:8001
in a browser.
Use
SASS
@import "../node_modules/react-image-gallery/src/ImageGallery";
CSS
<link rel="stylesheet" href="/image-gallery.css"/>
JS
var ImageGallery = require('react-image-gallery');
var images = [
{
original: 'http://lorempixel.com/1000/600/nature/1/',
thumbnail: 'http://lorempixel.com/250/150/nature/1/',
originalClass: 'featured-slide',
thumbnailClass: 'featured-thumb',
description: 'Optional description...'
},
{
original: 'http://lorempixel.com/1000/600/nature/2/',
thumbnail: 'http://lorempixel.com/250/150/nature/2/'
},
{
original: 'http://lorempixel.com/1000/600/nature/3/',
thumbnail: 'http://lorempixel.com/250/150/nature/3/'
}
];
handleSlide: function(index) {
console.log('Slid to ' + index);
},
render: function() {
return (
<ImageGallery
items={images}
autoPlay={true}
slideInterval={4000}
onSlide={this.handleSlide}/>
);
}
Props
-
items
: (required) Array of images, -
lazyLoad
: Boolean, defaulttrue
-
showThumbnails
: Boolean, defaulttrue
-
showNav
: Boolean, defaulttrue
-
showBullets
: Boolean, defaultfalse
-
showIndex
: Boolean, defaultfalse
-
indexSeparator
: String, default' / '
, ignored ifshowIndex
is false -
autoPlay
: Boolean, defaultfalse
-
slideInterval
: Integer, default4000
-
startIndex
: Integer, default0
-
onSlide
: Function,callback(index)
-
onClick
: Function,callback(event)
functions
-
play()
: continuous plays if image is not hovered. -
pause()
: pauses the slides. -
slideToIndex(index)
: slide to a specific index.
Notes
- Feel free to contribute and or provide feedback!
License
MIT