Responsive image gallery, slideshow, carousel
npm install react-image-galleryLive 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.
@import "../node_modules/react-image-gallery/src/ImageGallery";
<link rel="stylesheet" href="/https/github.com/image-gallery.css"/>
var ImageGallery = require('react-image-gallery');
var images = [
{
original: 'http://lorempixel.com/1000/600/nature/1/',
thumbnail: 'http://lorempixel.com/250/150/nature/1/'
},
{
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}/>
);
}items: (required) Array of images,lazyLoad: Boolean, defaulttrueshowThumbnails: Boolean, defaulttrueshowBullets: Boolean, defaultfalseautoPlay: Boolean, defaultfalseslideInterval: Integer, default4000onSlide: Function,callback(index)
play(): continuous plays if image is not hovered.pause(): pauses the slides.slideToIndex(index): slide to a specific index.
- Feel free to contribute and or provide feedback!
MIT