Skip to content

sylvesteraswin/react-gallery-swiper

Repository files navigation

React Gallery Swiper

Responsive react component for creating image carousels.

Features

  • Mobile friendly
  • Navigation with thumbnails
  • Custom render your slides

React Gallery Swiper

Getting started

npm install react-gallery-swiper

Example

example/src/app.jsx

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 (
            <GallerySwiper
                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.

About

Responsive react component for creating image carousels.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages