Releases: xiaolin/react-image-gallery
bug fixes/enhancments
Minor bug fixes and enhancements to Accessibility.
New prop useBrowserFullscreen
if false, fullscreen will be done via css within the browser
Bug fixes
Bug fixes
Custom rendered icons
- New Prop for custom
slideDuration
allowing you to adjust the transition of the gallery. - Custom render the controls with your own component
-
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} /> ); },
-
Thumbnail bar positioning
New prop thumbnailPosition
This allows setting the position of the thumbnail bar.
Available options are top, right, bottom, left
Custom controls added to image gallery
renderCustomControls
property allows you to add your own custom controls into the gallery.
Thanks to @venyii for pr #122
Other minor fixes/enhancements
- improve build process with stage-0
- added .eslintrc
- added background color on slides to help avoid background images sliding behind when the images do not take full width
Bug Fixes
Minor enhancements
Updated <li>
elements to be <button>
Added disableSwipe
support
Full screen support with Play/Pause
Breaking Changes
CSS/SCSS has been moved to a styles directory please see readme to update your paths
Hovering over main image slides no longer pauses slides
Updates
Full screen support for mobile
Play/Pause button support built in
Thumbnail container a bit more flexible
Thumbnails will now adjust based on the thumbnail container and not the image gallery container.
This will allow more flexibility moving the thumbnail bar around.