React Image Carousel, React Image Gallery
npm install react-gallery-swiperResponsive react component for creating image carousels.
Features
* Mobile friendly
* Navigation with thumbnails
* Custom render your slides

```
npm install react-gallery-swiper
js
import GallerySwiper from 'react-gallery-swiper';class App extends React.Component {
handleImageLoad = (event) => {
console.log('Image loaded ', event.target);
};
render = () => {
const images = [{
original: 'http://c7.staticflickr.com/4/3868/18982735806_b80b024040_h.jpg',
thumbnail: 'http://c7.staticflickr.com/4/3868/18982735806_cd60bcdb69_n.jpg',
originalClass: 'featured-slide',
thumbnailClass: 'featured-thumb',
originalAlt: 'I am a featured image',
thumbnailAlt: 'I am the thumbnail for the featured image',
}, {
original: 'http://c5.staticflickr.com/1/292/19003529492_214a7e3777_h.jpg',
thumbnail: 'http://c5.staticflickr.com/1/292/19003529492_226031f2c1_n.jpg'
}, {
original: 'http://c6.staticflickr.com/4/3802/19009038565_c197845618_h.jpg',
thumbnail: 'http://c6.staticflickr.com/4/3802/19009038565_17e2e21b22_n.jpg'
}];
return (
ref={i => this._gallerySwiper = i}
images={images}
onImageLoad={this.handleImageLoad}
/>
);
};
}
`Props
*
images (required) Array of objects.
* showNav: Boolean, default true.
* lazyLoad: Boolean, default false.
* progressiveLazyLoad: Boolean, default false.
* lazyLoadAnimation: Boolean, default false.
* aspectRatio: String, default square. Accepts one of square, 3x4, 4x6, 5x7, 8x10, 4x3, 6x4, 7x5, 10x8,
* infinite: Boolean, default true.
* showIndex: Boolean, default false.
* showBullets: Boolean, default false.
* showThumbnails: Boolean, default true.
* slideOnThumbnailsHover: Boolean, default false.
* disableThumbnailScroll: Boolean, default false.
* disableArrowKeys: Boolean, default false.
* disableSwipe: Boolean, default false.
* indexSeparator: String, default ' : '.
* startIndex: Number, default 0.
* thumbnailPosition: String, default X.
* thumbnailHoverSlideDelay: Number, default 300.
* onSlide: Function, callback(currentIndex).
* onThumbnailHover: Function, callback(currentIndex, event).
* onThumbnailClick: Function, callback(currentIndex, event).
* onBulletClick: Function, callback(currentIndex, event).
* onArrowClick: Function, callback(type, currentIndex, event).
* onImageLoad: Function, callback(event).
* onThumbnailError: Function, callback(event).
The below 2 features are not completly built
* renderItem: Function, custom item rendering.
* renderThumb: Function, custom item rendering of thumbnail.#Functions
*
whereAmI(): returns the current index.Mentions
Thanks to 'https://github.com/xiaolin', you were the inspiration behind this project.Build the example locally
`
git clone https://github.com/sylvesteraswin/react-gallery-swiper
npm install
npm start
`localhost:4000` in a browser.MIT