React Gallery Swiper

Responsive react component for creating image carousels.

Features
* Mobile friendly
* Navigation with thumbnails
* Custom render your slides

![React Gallery Swiper](https://www.youtube.com/watch?v=KTQ1Y8zFwt4)

Getting started

``npm install react-gallery-swiper`

`$3`

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

Then open localhost:4000` in a browser.

License

MIT

Collaboration

Feel free to contribute and or provide feedback.

Getting started


npm install react-gallery-swiper

$3

example/src/app.jsx

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.