react-image-gallery
Responsive image gallery, slideshow, carousel
Install
npm install evolved-react-image-gallery
Demo & Examples
Live 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.
Use
SASS
@import "../node_modules/react-image-gallery/src/ImageGallery";
CSS
<link rel="stylesheet" href="/image-gallery.css"/>
JS
var ImageGallery = ; var images = original: 'http://lorempixel.com/1000/600/nature/1/' thumbnail: 'http://lorempixel.com/250/150/nature/1/' originalClass: 'featured-slide' thumbnailClass: 'featured-thumb' originalAlt: 'original-alt' thumbnailAlt: 'thumbnail-alt' description: 'Optional description...' filemeta: added: '11.5.2016 13:50:00' filename: 'file.jpg' 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/' ; var gallerymenu; // Add an action link for each image.gallerymenu; { console;} { return <ImageGallery items=images gallerymenu=gallerymenu autoPlay=true showFileMeta=true slideInterval=4000 onSlide=thishandleSlide/> ;}
Props
items
: (required) Array of objects, see example above,gallerymenu
: Array of objects, see example abovelazyLoad
: Boolean, defaulttrue
showNav
: Boolean, defaulttrue
showThumbnails
: Boolean, defaulttrue
showFileMeta
: Boolean, defaultfalse
showBullets
: Boolean, defaultfalse
showIndex
: Boolean, defaultfalse
server
: Boolean, defaultfalse
- adds
loaded
class to all slide<img>
- adds
autoPlay
: Boolean, defaultfalse
disableThumbnailScroll
: Boolean, defaultfalse
- disables the thumbnail container from adjusting
slideOnThumbnailHover
: Boolean, defaultfalse
- slides to the currently hovered thumbnail
defaultImage
: String, defaultundefined
- an image src pointing to your default image if an image fails to load
indexSeparator
: String, default' / '
, ignored ifshowIndex
is falseslideInterval
: Integer, default4000
startIndex
: Integer, default0
onSlide
: Function,callback(index)
onClick
: Function,callback(event)
showCloseButton
: Boolean, defaultfalse
onCloseClick
: Function,callback(event)
useKeyboardNavigation
: Boolean, defaulttrue
- ability to use left and right arrows for navigation and esc button for triggering onCloseClick callback.
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