Live demo: linxtion.com/demo/react-image-gallery
React image gallery is a React component for building image galleries and carousels
Features of react-image-gallery
- Mobile friendly
- Thumbnail navigation
- Fullscreen support
- Custom rendered slides
- Responsive design
npm install react-image-gallery
# SCSS
@import "node_modules/react-image-gallery/styles/scss/image-gallery.scss";
# CSS
@import "node_modules/react-image-gallery/styles/css/image-gallery.css";
# Webpack
import "react-image-gallery/styles/css/image-gallery.css";
# Stylesheet with no icons
node_modules/react-image-gallery/styles/scss/image-gallery-no-icon.scss
node_modules/react-image-gallery/styles/css/image-gallery-no-icon.css
Need more example? See example/app.js
import ImageGallery from 'react-image-gallery';
class MyComponent extends React.Component {
handleImageLoad(event) {
console.log('Image loaded ', event.target)
}
render() {
const 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/'
}
]
return (
<ImageGallery
items={images}
slideInterval={2000}
onImageLoad={this.handleImageLoad}/>
);
}
}
items
: (required) Array of objects, see example above,- Available Properties
original
- image src urlthumbnail
- image thumbnail src urloriginalClass
- custom image classthumbnailClass
- custom thumbnail classoriginalAlt
- image altthumbnailAlt
- thumbnail image altthumbnailLabel
- label for thumbnaildescription
- description for imagesrcSet
- image srcset (html5 attribute)sizes
- image sizes (html5 attribute)
- Available Properties
infinite
: Boolean, defaulttrue
- infinite sliding
lazyLoad
: Boolean, defaultfalse
showNav
: Boolean, defaulttrue
showThumbnails
: Boolean, defaulttrue
thumbnailPosition
: String, defaultbottom
- available positions:
top, right, bottom, left
- available positions:
showFullscreenButton
: Boolean, defaulttrue
useBrowserFullscreen
: Boolean, defaulttrue
- if false, fullscreen will be done via css within the browser
showPlayButton
: Boolean, defaulttrue
showBullets
: Boolean, defaultfalse
showIndex
: Boolean, defaultfalse
autoPlay
: Boolean, defaultfalse
disableThumbnailScroll
: Boolean, defaultfalse
- disables the thumbnail container from adjusting
slideOnThumbnailHover
: Boolean, defaultfalse
- slides to the currently hovered thumbnail
disableArrowKeys
: Boolean, defaultfalse
disableSwipe
: Boolean, defaultfalse
defaultImage
: String, defaultundefined
- an image src pointing to your default image if an image fails to load
- handles both slide image, and thumbnail image
onImageError
: Function,callback(event)
- overrides defaultImage
onThumbnailError
: Function,callback(event)
- overrides defaultImage
indexSeparator
: String, default' / '
, ignored ifshowIndex
is falseslideDuration
: Integer, default450
- transition duration during image slide in milliseconds
swipingTransitionDuration
: Integer, default0
- transition duration while swiping in milliseconds
slideInterval
: Integer, default3000
startIndex
: Integer, default0
onImageLoad
: Function,callback(event)
onSlide
: Function,callback(currentIndex)
onScreenChange
: Function,callback(fullscreenElement)
onPause
: Function,callback(currentIndex)
onPlay
: Function,callback(currentIndex)
onClick
: Function,callback(event)
renderCustomControls
: Function, custom controls rendering- Use this to render custom controls or other elements on the currently displayed image (like the fullscreen button)
_renderCustomControls() { return <a href='' className='image-gallery-custom-action' onClick={this._customAction.bind(this)}/> }
renderItem
: Function, custom item rendering- As a prop on a specific item
[{thumbnail: '...', renderItem: '...'}]
- As a prop passed into
ImageGallery
to completely override_renderItem
, see original below_renderItem(item) { const onImageError = this.props.onImageError || this._handleImageError return ( <div className='image-gallery-image'> <img src={item.original} alt={item.originalAlt} srcSet={item.srcSet} sizes={item.sizes} onLoad={this.props.onImageLoad} onError={onImageError.bind(this)} /> { item.description && <span className='image-gallery-description'> {item.description} </span> } </div> ) }
- As a prop on a specific item
renderLeftNav
: Function, custom left nav component- Use this to render a custom left nav control
- Passes
onClick
callback that will slide to the previous item anddisabled
argument for when to disable the nav
renderLeftNav(onClick, disabled) { return ( <button className='image-gallery-custom-left-nav' disabled={disabled} onClick={onClick}/> ) }
renderRightNav
: Function, custom right nav component- Use this to render a custom right nav control
- Passes
onClick
callback that will slide to the next item anddisabled
argument for when to disable the nav
renderRightNav(onClick, disabled) { return ( <button className='image-gallery-custom-right-nav' disabled={disabled} onClick={onClick}/> ) }
renderPlayPauseButton
: Function, play pause button component- Use this to render a custom play pause button
- Passes
onClick
callback that will toggle play/pause andisPlaying
argument for when gallery is playing
renderPlayPauseButton: (onClick, isPlaying) => { return ( <button type='button' className={ `image-gallery-play-button${isPlaying ? ' active' : ''}`} onClick={onClick} /> ); }
renderFullscreenButton
: Function, custom fullscreen button component- Use this to render a custom fullscreen button
- Passes
onClick
callback that will toggle fullscreen andisFullscreen
argument for when fullscreen is active
renderFullscreenButton: (onClick, isFullscreen) => { return ( <button type='button' className={ `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`} onClick={onClick} /> ); },
play()
: continuous plays if image is not hoveredpause()
: pauses the slidesfullScreen()
: activates full screenexitFullScreen()
: deactivates full screenslideToIndex(index)
: slides to a specific indexgetCurrentIndex()
: returns the current index
- Follow eslint provided
- Comment your code
- Describe your feature/implementation in the pullrequest
- Write clean code
git clone https://github.com/xiaolin/react-image-gallery.git
cd react-image-gallery
npm install
npm start
Then open localhost:8001
in a browser.
MIT