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}
          />
        );
      },