Improvement and new prop

Added debounce so when resizing the gallery does not make excessive calls.
Added swipingTransitionDuration prop to allow adjusting the transition while swiping

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

• Fixes gallery shrinking when using lazyLoad
• Fixes a resizeTimer not being cleared on unmount

Bug fixes

• Adjust slide throttle based on slideDuration (fixes conflicting slide animation).
• Fix jumpiness when lazyLoad is on, and sliding to a non loaded slide.

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 and disabled 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 and disabled 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 and isPlaying 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 and isFullscreen 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

Fixes onTouchStart preventing page scrolling when touch starts on a thumbnail/arrow navigation
Fixes onScreenChange prop to handle unsupported browsers.

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