Package Exports

react-image-gallery

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-image-gallery) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 examples locally, run:

npm install
gulp dev

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/'
  },
  {
    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,
showThumbnails: Boolean, default true
showBullets: Boolean, default false
autoPlay: Boolean, default false
slideInterval: Integer, default 4000
onSlide: Function, callback(index)

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