react-image-gallery 1.0.3 → 1.0.7

package/README.md

@@ -4,21 +4,23 @@ React Carousel Image Gallery
 [![npm version](https://badge.fury.io/js/react-image-gallery.svg)](https://badge.fury.io/js/react-image-gallery)
 [![Download Count](http://img.shields.io/npm/dm/react-image-gallery.svg?style=flat)](http://www.npmjs.com/package/react-image-gallery)
 
-## Live Demo (try it on mobile for swipe support)
-#### [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
+### Live Demo (try it on mobile for swipe support)
+[`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
 
 ![demo gif](https://github.com/xiaolin/react-image-gallery/raw/master/static/image_gallery_v1.0.2.gif)
 
 React image gallery is a React component for building image galleries and carousels
 
-Features of `react-image-gallery`
-* Mobile Swipe Gestures
-* Thumbnail Navigation
-* Fullscreen Support
-* Custom Rendered Slides
-* Responsive Design
+## Features
+
+* Mobile swipe gestures
+* Thumbnail navigation
+* Fullscreen support
+* Custom rendered slides
+* RTL support
+* Responsive design
 * Tons of customization options (see props below)
-* Lightweight ~8kb (gzipped, excluding react)
+* Lightweight ~7kb gzipped
 
 ## Getting started
 
@@ -70,6 +72,7 @@ class MyGallery extends React.Component {
   * Available Properties
     * `original` - image src url
     * `thumbnail` - image thumbnail src url
+    * `fullscreen` - image for fullscreen (defaults to original)
     * `originalClass` - custom image class
     * `thumbnailClass` - custom thumbnail class
     * `renderItem` - Function for custom renderer (see renderItem below)
@@ -136,6 +139,7 @@ class MyGallery extends React.Component {
 * `onThumbnailClick`: Function, `callback(event, index)`
 * `onImageLoad`: Function, `callback(event)`
 * `onSlide`: Function, `callback(currentIndex)`
+* `onBeforeSlide`: Function, `callback(nextIndex)`
 * `onScreenChange`: Function, `callback(fullscreenElement)`
 * `onPause`: Function, `callback(currentIndex)`
 * `onPlay`: Function, `callback(currentIndex)`

package/build/image-gallery.js

@@ -73,7 +73,7 @@ var ImageGallery = function (_React$Component) {
     _this.state = {
       currentIndex: props.startIndex,
       thumbsTranslate: 0,
-      offsetPercentage: 0,
+      currentSlideOffset: 0,
       galleryWidth: 0,
       thumbnailsWrapperWidth: 0,
       thumbnailsWrapperHeight: 0,
@@ -93,6 +93,7 @@ var ImageGallery = function (_React$Component) {
     _this.handleScreenChange = _this.handleScreenChange.bind(_this);
     _this.handleSwiping = _this.handleSwiping.bind(_this);
     _this.onThumbnailMouseLeave = _this.onThumbnailMouseLeave.bind(_this);
+    _this.handleImageError = _this.handleImageError.bind(_this);
     _this.pauseOrPlay = _this.pauseOrPlay.bind(_this);
     _this.renderThumbInner = _this.renderThumbInner.bind(_this);
     _this.renderItem = _this.renderItem.bind(_this);
@@ -132,13 +133,15 @@ var ImageGallery = function (_React$Component) {
           lazyLoad = _props.lazyLoad,
           slideDuration = _props.slideDuration,
           startIndex = _props.startIndex,
-          thumbnailPosition = _props.thumbnailPosition;
+          thumbnailPosition = _props.thumbnailPosition,
+          showThumbnails = _props.showThumbnails;
       var currentIndex = this.state.currentIndex;
 
       var itemsSizeChanged = prevProps.items.length !== items.length;
       var itemsChanged = !(0, _lodash6.default)(prevProps.items, items);
       var startIndexUpdated = prevProps.startIndex !== startIndex;
       var thumbnailsPositionChanged = prevProps.thumbnailPosition !== thumbnailPosition;
+      var showThumbnailsChanged = prevProps.showThumbnails !== showThumbnails;
 
       if (thumbnailsPositionChanged) {
         // re-initialize resizeObserver because slides was unmounted and mounted again
@@ -146,7 +149,7 @@ var ImageGallery = function (_React$Component) {
         this.initResizeObserver(this.imageGallerySlideWrapper);
       }
 
-      if (itemsSizeChanged) {
+      if (itemsSizeChanged || showThumbnailsChanged) {
         this.handleResize();
       }
       if (prevState.currentIndex !== currentIndex) {
@@ -173,9 +176,9 @@ var ImageGallery = function (_React$Component) {
       window.removeEventListener('mousedown', this.handleMouseDown);
       this.removeScreenChangeEvent();
       this.removeResizeObserver();
-      if (this.intervalId) {
-        window.clearInterval(this.intervalId);
-        this.intervalId = null;
+      if (this.playPauseIntervalId) {
+        window.clearInterval(this.playPauseIntervalId);
+        this.playPauseIntervalId = null;
       }
       if (this.transitionTimer) {
         window.clearTimeout(this.transitionTimer);
@@ -351,39 +354,50 @@ var ImageGallery = function (_React$Component) {
       // For taking care of infinite swipe when there are only two slides
       var _state4 = this.state,
           currentIndex = _state4.currentIndex,
-          offsetPercentage = _state4.offsetPercentage,
+          currentSlideOffset = _state4.currentSlideOffset,
           previousIndex = _state4.previousIndex;
 
+      var indexChanged = currentIndex !== previousIndex;
+      var firstSlideWasPrevSlide = index === 0 && previousIndex === 0;
+      var secondSlideWasPrevSlide = index === 1 && previousIndex === 1;
+      var firstSlideIsNextSlide = index === 0 && currentIndex === 1;
+      var secondSlideIsNextSlide = index === 1 && currentIndex === 0;
+      var swipingEnded = currentSlideOffset === 0;
       var baseTranslateX = -100 * currentIndex;
-      var translateX = baseTranslateX + index * 100 + offsetPercentage;
+      var translateX = baseTranslateX + index * 100 + currentSlideOffset;
 
       // keep track of user swiping direction
-      if (offsetPercentage > 0) {
+      // important to understand how to translateX based on last direction
+      if (currentSlideOffset > 0) {
         this.direction = 'left';
-      } else if (offsetPercentage < 0) {
+      } else if (currentSlideOffset < 0) {
         this.direction = 'right';
       }
 
-      // when swiping make sure the slides are on the correct side
-      if (currentIndex === 0 && index === 1 && offsetPercentage > 0) {
-        translateX = -100 + offsetPercentage;
-      } else if (currentIndex === 1 && index === 0 && offsetPercentage < 0) {
-        translateX = 100 + offsetPercentage;
+      // when swiping between two slides make sure the next and prev slides
+      // are on both left and right
+      if (secondSlideIsNextSlide && currentSlideOffset > 0) {
+        // swiping right
+        translateX = -100 + currentSlideOffset;
+      }
+      if (firstSlideIsNextSlide && currentSlideOffset < 0) {
+        // swiping left
+        translateX = 100 + currentSlideOffset;
       }
 
-      if (currentIndex !== previousIndex) {
-        // when swiped move the slide to the correct side
-        if (previousIndex === 0 && index === 0 && offsetPercentage === 0 && this.direction === 'left') {
+      if (indexChanged) {
+        // when indexChanged move the slide to the correct side
+        if (firstSlideWasPrevSlide && swipingEnded && this.direction === 'left') {
           translateX = 100;
-        } else if (previousIndex === 1 && index === 1 && offsetPercentage === 0 && this.direction === 'right') {
+        } else if (secondSlideWasPrevSlide && swipingEnded && this.direction === 'right') {
           translateX = -100;
         }
       } else {
-        // keep the slide on the correct slide even when not a swipe
-        if (currentIndex === 0 && index === 1 && offsetPercentage === 0 && this.direction === 'left') {
+        // keep the slide on the correct side if the swipe was not successful
+        if (secondSlideIsNextSlide && swipingEnded && this.direction === 'left') {
           translateX = -100;
         }
-        if (currentIndex === 1 && index === 0 && offsetPercentage === 0 && this.direction === 'right') {
+        if (firstSlideIsNextSlide && swipingEnded && this.direction === 'right') {
           translateX = 100;
         }
       }
@@ -405,7 +419,7 @@ var ImageGallery = function (_React$Component) {
     value: function getSlideStyle(index) {
       var _state5 = this.state,
           currentIndex = _state5.currentIndex,
-          offsetPercentage = _state5.offsetPercentage,
+          currentSlideOffset = _state5.currentSlideOffset,
           slideStyle = _state5.slideStyle;
       var _props5 = this.props,
           infinite = _props5.infinite,
@@ -418,17 +432,17 @@ var ImageGallery = function (_React$Component) {
 
       // calculates where the other slides belong based on currentIndex
       // if it is RTL the base line should be reversed
-      var translateX = (baseTranslateX + index * 100) * (isRTL ? -1 : 1) + offsetPercentage;
+      var translateX = (baseTranslateX + index * 100) * (isRTL ? -1 : 1) + currentSlideOffset;
 
       if (infinite && items.length > 2) {
         if (currentIndex === 0 && index === totalSlides) {
           // make the last slide the slide before the first
           // if it is RTL the base line should be reversed
-          translateX = -100 * (isRTL ? -1 : 1) + offsetPercentage;
+          translateX = -100 * (isRTL ? -1 : 1) + currentSlideOffset;
         } else if (currentIndex === totalSlides && index === 0) {
           // make the first slide the slide after the last
           // if it is RTL the base line should be reversed
-          translateX = 100 * (isRTL ? -1 : 1) + offsetPercentage;
+          translateX = 100 * (isRTL ? -1 : 1) + currentSlideOffset;
         }
       }
 
@@ -490,12 +504,13 @@ var ImageGallery = function (_React$Component) {
     }
   }, {
     key: 'getSlideItems',
-    value: function getSlideItems(items) {
+    value: function getSlideItems() {
       var _this4 = this;
 
       var currentIndex = this.state.currentIndex;
       var _props7 = this.props,
           infinite = _props7.infinite,
+          items = _props7.items,
           slideOnThumbnailOver = _props7.slideOnThumbnailOver,
           onClick = _props7.onClick,
           lazyLoad = _props7.lazyLoad,
@@ -531,7 +546,7 @@ var ImageGallery = function (_React$Component) {
         var slide = _react2.default.createElement(
           'div',
           {
-            key: 'slide-' + item.original,
+            key: 'slide-' + item.original + '-' + index,
             tabIndex: '-1',
             className: 'image-gallery-slide ' + alignment + ' ' + originalClass,
             style: slideStyle,
@@ -562,7 +577,7 @@ var ImageGallery = function (_React$Component) {
           thumbnails.push(_react2.default.createElement(
             'button',
             {
-              key: 'thumbnail-' + item.original,
+              key: 'thumbnail-' + item.original + '-' + index,
               type: 'button',
               tabIndex: '0',
               'aria-pressed': currentIndex === index ? 'true' : 'false',
@@ -597,7 +612,7 @@ var ImageGallery = function (_React$Component) {
           var igBulletClass = (0, _clsx2.default)('image-gallery-bullet', item.bulletClass, { active: currentIndex === index });
           bullets.push(_react2.default.createElement('button', {
             type: 'button',
-            key: 'bullet-' + item.original,
+            key: 'bullet-' + item.original + '-' + index,
             className: igBulletClass,
             onClick: bulletOnClick,
             'aria-pressed': currentIndex === index ? 'true' : 'false',
@@ -762,9 +777,9 @@ var ImageGallery = function (_React$Component) {
       if (!isTransitioning && !scrollingUpDown) {
         var side = dir === _reactSwipeable.RIGHT ? 1 : -1;
 
-        var offsetPercentage = absX / galleryWidth * 100;
-        if (Math.abs(offsetPercentage) >= 100) {
-          offsetPercentage = 100;
+        var currentSlideOffset = absX / galleryWidth * 100;
+        if (Math.abs(currentSlideOffset) >= 100) {
+          currentSlideOffset = 100;
         }
 
         var swipingTransition = {
@@ -772,21 +787,21 @@ var ImageGallery = function (_React$Component) {
         };
 
         this.setState({
-          offsetPercentage: side * offsetPercentage,
+          currentSlideOffset: side * currentSlideOffset,
           slideStyle: swipingTransition
         });
       } else {
         // don't move the slide
-        this.setState({ offsetPercentage: 0 });
+        this.setState({ currentSlideOffset: 0 });
       }
     }
   }, {
     key: 'sufficientSwipe',
     value: function sufficientSwipe() {
-      var offsetPercentage = this.state.offsetPercentage;
+      var currentSlideOffset = this.state.currentSlideOffset;
       var swipeThreshold = this.props.swipeThreshold;
 
-      return Math.abs(offsetPercentage) > swipeThreshold;
+      return Math.abs(currentSlideOffset) > swipeThreshold;
     }
   }, {
     key: 'handleOnSwiped',
@@ -872,13 +887,13 @@ var ImageGallery = function (_React$Component) {
 
       switch (key) {
         case LEFT_ARROW:
-          if (this.canSlideLeft() && !this.intervalId) {
-            this.slideLeft();
+          if (this.canSlideLeft() && !this.playPauseIntervalId) {
+            this.slideLeft(event);
           }
           break;
         case RIGHT_ARROW:
-          if (this.canSlideRight() && !this.intervalId) {
-            this.slideRight();
+          if (this.canSlideRight() && !this.playPauseIntervalId) {
+            this.slideRight(event);
           }
           break;
         case ESC_KEY:
@@ -961,7 +976,7 @@ var ImageGallery = function (_React$Component) {
   }, {
     key: 'togglePlay',
     value: function togglePlay() {
-      if (this.intervalId) {
+      if (this.playPauseIntervalId) {
         this.pause();
       } else {
         this.play();
@@ -973,12 +988,16 @@ var ImageGallery = function (_React$Component) {
       /*
         handles screen change events that the browser triggers e.g. esc key
       */
-      var onScreenChange = this.props.onScreenChange;
+      var _props13 = this.props,
+          onScreenChange = _props13.onScreenChange,
+          useBrowserFullscreen = _props13.useBrowserFullscreen;
 
       var fullScreenElement = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
 
-      if (onScreenChange) onScreenChange(fullScreenElement);
-      this.setState({ isFullscreen: !!fullScreenElement });
+      // check if screenchange element is the gallery
+      var isFullscreen = this.imageGallery.current === fullScreenElement;
+      if (onScreenChange) onScreenChange(isFullscreen);
+      if (useBrowserFullscreen) this.setState({ isFullscreen: isFullscreen });
     }
   }, {
     key: 'slideToIndex',
@@ -986,14 +1005,15 @@ var ImageGallery = function (_React$Component) {
       var _state12 = this.state,
           currentIndex = _state12.currentIndex,
           isTransitioning = _state12.isTransitioning;
-      var _props13 = this.props,
-          items = _props13.items,
-          slideDuration = _props13.slideDuration;
+      var _props14 = this.props,
+          items = _props14.items,
+          slideDuration = _props14.slideDuration,
+          onBeforeSlide = _props14.onBeforeSlide;
 
 
       if (!isTransitioning) {
         if (event) {
-          if (this.intervalId) {
+          if (this.playPauseIntervalId) {
             // user triggered event while ImageGallery is playing, reset interval
             this.pause(false);
             this.play(false);
@@ -1008,50 +1028,102 @@ var ImageGallery = function (_React$Component) {
           nextIndex = 0;
         }
 
+        if (onBeforeSlide && nextIndex !== currentIndex) {
+          onBeforeSlide(nextIndex);
+        }
+
         this.setState({
           previousIndex: currentIndex,
           currentIndex: nextIndex,
           isTransitioning: nextIndex !== currentIndex,
-          offsetPercentage: 0,
+          currentSlideOffset: 0,
           slideStyle: { transition: 'all ' + slideDuration + 'ms ease-out' }
         }, this.onSliding);
       }
     }
   }, {
     key: 'slideLeft',
-    value: function slideLeft() {
+    value: function slideLeft(event) {
       var isRTL = this.props.isRTL;
 
       if (isRTL) {
-        this.slideNext();
+        this.slideNext(event);
       } else {
-        this.slidePrevious();
+        this.slidePrevious(event);
       }
     }
   }, {
     key: 'slideRight',
-    value: function slideRight() {
+    value: function slideRight(event) {
       var isRTL = this.props.isRTL;
 
       if (isRTL) {
-        this.slidePrevious();
+        this.slidePrevious(event);
       } else {
-        this.slideNext();
+        this.slideNext(event);
       }
     }
   }, {
     key: 'slidePrevious',
     value: function slidePrevious(event) {
-      var currentIndex = this.state.currentIndex;
+      var _this6 = this;
 
-      this.slideToIndex(currentIndex - 1, event);
+      var _state13 = this.state,
+          currentIndex = _state13.currentIndex,
+          currentSlideOffset = _state13.currentSlideOffset,
+          isTransitioning = _state13.isTransitioning;
+      var items = this.props.items;
+
+      var nextIndex = currentIndex - 1;
+
+      if (isTransitioning) return;
+
+      if (items.length === 2) {
+        /*
+          When there are only 2 slides fake a tiny swipe to get the slides
+          on the correct side for transitioning
+        */
+        this.setState({
+          currentSlideOffset: currentSlideOffset + 0.001, // this will reset once index changes
+          slideStyle: { transition: 'none' } // move the slide over instantly
+        }, function () {
+          // add 25ms timeout to avoid delay in moving slides over
+          window.setTimeout(function () {
+            return _this6.slideToIndex(nextIndex, event);
+          }, 25);
+        });
+      } else {
+        this.slideToIndex(nextIndex, event);
+      }
     }
   }, {
     key: 'slideNext',
     value: function slideNext(event) {
-      var currentIndex = this.state.currentIndex;
+      var _this7 = this;
+
+      var _state14 = this.state,
+          currentIndex = _state14.currentIndex,
+          currentSlideOffset = _state14.currentSlideOffset,
+          isTransitioning = _state14.isTransitioning;
+      var items = this.props.items;
 
-      this.slideToIndex(currentIndex + 1, event);
+      var nextIndex = currentIndex + 1;
+
+      if (isTransitioning) return;
+
+      if (items.length === 2) {
+        // same as above for 2 slides
+        this.setState({
+          currentSlideOffset: currentSlideOffset - 0.001,
+          slideStyle: { transition: 'none' }
+        }, function () {
+          window.setTimeout(function () {
+            return _this7.slideToIndex(nextIndex, event);
+          }, 25);
+        });
+      } else {
+        this.slideToIndex(nextIndex, event);
+      }
     }
   }, {
     key: 'handleThumbnailMouseOver',
@@ -1086,19 +1158,19 @@ var ImageGallery = function (_React$Component) {
   }, {
     key: 'addScreenChangeEvent',
     value: function addScreenChangeEvent() {
-      var _this6 = this;
+      var _this8 = this;
 
       screenChangeEvents.forEach(function (eventName) {
-        document.addEventListener(eventName, _this6.handleScreenChange);
+        document.addEventListener(eventName, _this8.handleScreenChange);
       });
     }
   }, {
     key: 'removeScreenChangeEvent',
     value: function removeScreenChangeEvent() {
-      var _this7 = this;
+      var _this9 = this;
 
       screenChangeEvents.forEach(function (eventName) {
-        document.removeEventListener(eventName, _this7.handleScreenChange);
+        document.removeEventListener(eventName, _this9.handleScreenChange);
       });
     }
   }, {
@@ -1167,15 +1239,15 @@ var ImageGallery = function (_React$Component) {
     key: 'play',
     value: function play() {
       var shouldCallOnPlay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var _props14 = this.props,
-          onPlay = _props14.onPlay,
-          slideInterval = _props14.slideInterval,
-          slideDuration = _props14.slideDuration;
+      var _props15 = this.props,
+          onPlay = _props15.onPlay,
+          slideInterval = _props15.slideInterval,
+          slideDuration = _props15.slideDuration;
       var currentIndex = this.state.currentIndex;
 
-      if (!this.intervalId) {
+      if (!this.playPauseIntervalId) {
         this.setState({ isPlaying: true });
-        this.intervalId = window.setInterval(this.pauseOrPlay, Math.max(slideInterval, slideDuration));
+        this.playPauseIntervalId = window.setInterval(this.pauseOrPlay, Math.max(slideInterval, slideDuration));
         if (onPlay && shouldCallOnPlay) {
           onPlay(currentIndex);
         }
@@ -1188,9 +1260,9 @@ var ImageGallery = function (_React$Component) {
       var onPause = this.props.onPause;
       var currentIndex = this.state.currentIndex;
 
-      if (this.intervalId) {
-        window.clearInterval(this.intervalId);
-        this.intervalId = null;
+      if (this.playPauseIntervalId) {
+        window.clearInterval(this.playPauseIntervalId);
+        this.playPauseIntervalId = null;
         this.setState({ isPlaying: false });
         if (onPause && shouldCallOnPause) {
           onPause(currentIndex);
@@ -1212,14 +1284,28 @@ var ImageGallery = function (_React$Component) {
       this.loadedImages[item.original] = true;
       return false;
     }
+  }, {
+    key: 'handleImageLoaded',
+    value: function handleImageLoaded(event, item) {
+      var onImageLoad = this.props.onImageLoad;
+
+      var imageExists = this.loadedImages[item.original];
+      if (!imageExists && onImageLoad) {
+        this.loadedImages[item.original] = true; // prevent from call again
+        // image just loaded, call onImageLoad
+        onImageLoad(event);
+      }
+    }
   }, {
     key: 'renderItem',
     value: function renderItem(item) {
-      var _props15 = this.props,
-          onImageError = _props15.onImageError,
-          onImageLoad = _props15.onImageLoad;
+      var _this10 = this;
+
+      var isFullscreen = this.state.isFullscreen;
+      var onImageError = this.props.onImageError;
 
       var handleImageError = onImageError || this.handleImageError;
+      var itemSrc = isFullscreen ? item.fullscreen || item.original : item.original;
 
       return _react2.default.createElement(
         'div',
@@ -1227,12 +1313,14 @@ var ImageGallery = function (_React$Component) {
         item.imageSet ? _react2.default.createElement(
           'picture',
           {
-            onLoad: !this.isImageLoaded(item) ? onImageLoad : null,
+            onLoad: function onLoad(event) {
+              return _this10.handleImageLoaded(event, item);
+            },
             onError: handleImageError
           },
-          item.imageSet.map(function (source) {
+          item.imageSet.map(function (source, index) {
             return _react2.default.createElement('source', {
-              key: source.media,
+              key: 'media-' + source.srcSet + '-' + index,
               media: source.media,
               srcSet: source.srcSet,
               type: source.type
@@ -1241,16 +1329,18 @@ var ImageGallery = function (_React$Component) {
           _react2.default.createElement('img', {
             className: 'image-gallery-image',
             alt: item.originalAlt,
-            src: item.original
+            src: itemSrc
           })
         ) : _react2.default.createElement('img', {
           className: 'image-gallery-image',
-          src: item.original,
+          src: itemSrc,
           alt: item.originalAlt,
           srcSet: item.srcSet,
           sizes: item.sizes,
           title: item.originalTitle,
-          onLoad: !this.isImageLoaded(item) ? onImageLoad : null,
+          onLoad: function onLoad(event) {
+            return _this10.handleImageLoaded(event, item);
+          },
           onError: handleImageError
         }),
         item.description && _react2.default.createElement(
@@ -1287,11 +1377,11 @@ var ImageGallery = function (_React$Component) {
   }, {
     key: 'render',
     value: function render() {
-      var _state13 = this.state,
-          currentIndex = _state13.currentIndex,
-          isFullscreen = _state13.isFullscreen,
-          modalFullscreen = _state13.modalFullscreen,
-          isPlaying = _state13.isPlaying;
+      var _state15 = this.state,
+          currentIndex = _state15.currentIndex,
+          isFullscreen = _state15.isFullscreen,
+          modalFullscreen = _state15.modalFullscreen,
+          isPlaying = _state15.isPlaying;
       var _props16 = this.props,
           additionalClass = _props16.additionalClass,
           indexSeparator = _props16.indexSeparator,
@@ -1313,7 +1403,7 @@ var ImageGallery = function (_React$Component) {
 
       var thumbnailStyle = this.getThumbnailStyle();
 
-      var _getSlideItems = this.getSlideItems(items),
+      var _getSlideItems = this.getSlideItems(),
           slides = _getSlideItems.slides,
           thumbnails = _getSlideItems.thumbnails,
           bullets = _getSlideItems.bullets;
@@ -1328,8 +1418,8 @@ var ImageGallery = function (_React$Component) {
           _react2.default.Fragment,
           null,
           showNav && _react2.default.createElement(
-            'span',
-            { key: 'navigation' },
+            _react2.default.Fragment,
+            null,
             renderLeftNav(this.slideLeft, !this.canSlideLeft()),
             renderRightNav(this.slideRight, !this.canSlideRight())
           ),
@@ -1337,7 +1427,6 @@ var ImageGallery = function (_React$Component) {
             _reactSwipeable.Swipeable,
             {
               className: 'image-gallery-swipe',
-              key: 'swipeable',
               delta: 0,
               onSwiping: this.handleSwiping,
               onSwiped: this.handleOnSwiped
@@ -1443,6 +1532,7 @@ ImageGallery.propTypes = {
     bulletOnClick: _propTypes.func,
     description: _propTypes.string,
     original: _propTypes.string.isRequired,
+    fullscreen: _propTypes.string,
     originalAlt: _propTypes.string,
     originalTitle: _propTypes.string,
     thumbnail: _propTypes.string,
@@ -1481,6 +1571,7 @@ ImageGallery.propTypes = {
   swipeThreshold: _propTypes.number,
   swipingTransitionDuration: _propTypes.number,
   onSlide: _propTypes.func,
+  onBeforeSlide: _propTypes.func,
   onScreenChange: _propTypes.func,
   onPause: _propTypes.func,
   onPlay: _propTypes.func,
@@ -1533,6 +1624,7 @@ ImageGallery.defaultProps = {
   slideDuration: 450,
   swipingTransitionDuration: 0,
   onSlide: null,
+  onBeforeSlide: null,
   onScreenChange: null,
   onPause: null,
   onPlay: null,

package/gulpfile.js

@@ -1,32 +1,32 @@
-var babel = require('gulp-babel');
-var browserify = require('browserify');
-var concat = require('gulp-concat');
-var connect = require('gulp-connect');
-var gulp = require('gulp');
-var livereload = require('gulp-livereload');
-var rename = require('gulp-rename');
-var sass = require('gulp-sass');
-var uglify = require('gulp-uglify');
-var cleanCSS = require('gulp-clean-css');
-var source = require('vinyl-source-stream');
-var buffer = require('vinyl-buffer');
-var watchify = require('watchify');
+const babel = require('gulp-babel');
+const browserify = require('browserify');
+const concat = require('gulp-concat');
+const connect = require('gulp-connect');
+const gulp = require('gulp');
+const livereload = require('gulp-livereload');
+const rename = require('gulp-rename');
+const sass = require('gulp-sass');
+const uglify = require('gulp-uglify');
+const cleanCSS = require('gulp-clean-css');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const watchify = require('watchify');
 
-var babelOptions = {
+const babelOptions = {
   plugins: ['transform-object-assign'],
-  presets: ['es2015', 'react', 'stage-0']
+  presets: ['es2015', 'react', 'stage-0'],
 };
 
-gulp.task('server', function () {
+gulp.task('server', () => {
   connect.server({
     host: '0.0.0.0',
     root: ['example', 'build', 'styles'],
     port: 8001,
-    livereload: true
+    livereload: true,
   });
 });
 
-gulp.task('sass', function () {
+gulp.task('sass', () => {
   gulp.src('./styles/scss/image-gallery.scss')
     .pipe(sass())
     .pipe(rename('image-gallery.css'))
@@ -34,26 +34,26 @@ gulp.task('sass', function () {
     .pipe(livereload());
 });
 
-gulp.task('scripts', function() {
+gulp.task('scripts', () => {
   watchify(browserify({
     entries: './example/app.js',
     extensions: ['.jsx'],
-    debug: true
+    debug: true,
   }).transform('babelify', babelOptions))
     .bundle()
-    .on('error', err => { console.error('error is', err) })
+    .on('error', (err) => console.error('error is', err))
     .pipe(source('example.js'))
     .pipe(buffer())
     .pipe(gulp.dest('./example/'))
     .pipe(livereload());
 });
 
-gulp.task('demo-src', function() {
+gulp.task('demo-src', () => {
   process.env.NODE_ENV = 'production';
   browserify({
     entries: './example/app.js',
     extensions: ['.jsx'],
-    debug: true
+    debug: true,
   }).transform('babelify', babelOptions)
     .bundle()
     .pipe(source('demo.js'))
@@ -63,26 +63,25 @@ gulp.task('demo-src', function() {
 
   gulp.src(['./styles/css/image-gallery.css', './example/app.css'])
     .pipe(concat('demo.css'))
-    .pipe(cleanCSS({keepSpecialComments: false}))
+    .pipe(cleanCSS({ keepSpecialComments: false }))
     .pipe(gulp.dest('./demo/'));
 });
 
-gulp.task('source-js', function () {
-  return gulp.src('./src/ImageGallery.jsx')
+gulp.task('source-js', () => (
+  gulp.src('./src/ImageGallery.jsx')
     .pipe(concat('image-gallery.js'))
     .pipe(babel(babelOptions))
-    .pipe(gulp.dest('./build'));
-});
+    .pipe(gulp.dest('./build'))
+));
 
-// todo fix this to do it in on task
-gulp.task('svg-js', function () {
-  return gulp.src('./src/SVG.jsx')
+gulp.task('svg-js', () => (
+  gulp.src('./src/SVG.jsx')
     .pipe(concat('SVG.js'))
     .pipe(babel(babelOptions))
-    .pipe(gulp.dest('./build'));
-});
+    .pipe(gulp.dest('./build'))
+));
 
-gulp.task('watch', function() {
+gulp.task('watch', () => {
   livereload.listen();
   gulp.watch(['styles/**/*.scss'], ['sass']);
   gulp.watch(['src/*.jsx', 'src/icons/*.jsx', 'example/app.js'], ['scripts']);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-gallery",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "description": "React carousel image gallery component with thumbnail and mobile support",
   "main": "./build/image-gallery.js",
   "scripts": {

package/src/ImageGallery.jsx

@@ -42,6 +42,7 @@ export default class ImageGallery extends React.Component {
       bulletOnClick: func,
       description: string,
       original: string.isRequired,
+      fullscreen: string,
       originalAlt: string,
       originalTitle: string,
       thumbnail: string,
@@ -80,6 +81,7 @@ export default class ImageGallery extends React.Component {
     swipeThreshold: number,
     swipingTransitionDuration: number,
     onSlide: func,
+    onBeforeSlide: func,
     onScreenChange: func,
     onPause: func,
     onPlay: func,
@@ -133,6 +135,7 @@ export default class ImageGallery extends React.Component {
     slideDuration: 450,
     swipingTransitionDuration: 0,
     onSlide: null,
+    onBeforeSlide: null,
     onScreenChange: null,
     onPause: null,
     onPlay: null,
@@ -201,7 +204,7 @@ export default class ImageGallery extends React.Component {
     this.state = {
       currentIndex: props.startIndex,
       thumbsTranslate: 0,
-      offsetPercentage: 0,
+      currentSlideOffset: 0,
       galleryWidth: 0,
       thumbnailsWrapperWidth: 0,
       thumbnailsWrapperHeight: 0,
@@ -221,6 +224,7 @@ export default class ImageGallery extends React.Component {
     this.handleScreenChange = this.handleScreenChange.bind(this);
     this.handleSwiping = this.handleSwiping.bind(this);
     this.onThumbnailMouseLeave = this.onThumbnailMouseLeave.bind(this);
+    this.handleImageError = this.handleImageError.bind(this);
     this.pauseOrPlay = this.pauseOrPlay.bind(this);
     this.renderThumbInner = this.renderThumbInner.bind(this);
     this.renderItem = this.renderItem.bind(this);
@@ -258,12 +262,14 @@ export default class ImageGallery extends React.Component {
       slideDuration,
       startIndex,
       thumbnailPosition,
+      showThumbnails,
     } = this.props;
     const { currentIndex } = this.state;
     const itemsSizeChanged = prevProps.items.length !== items.length;
     const itemsChanged = !isEqual(prevProps.items, items);
     const startIndexUpdated = prevProps.startIndex !== startIndex;
     const thumbnailsPositionChanged = prevProps.thumbnailPosition !== thumbnailPosition;
+    const showThumbnailsChanged = prevProps.showThumbnails !== showThumbnails;
 
     if (thumbnailsPositionChanged) {
       // re-initialize resizeObserver because slides was unmounted and mounted again
@@ -271,7 +277,7 @@ export default class ImageGallery extends React.Component {
       this.initResizeObserver(this.imageGallerySlideWrapper);
     }
 
-    if (itemsSizeChanged) {
+    if (itemsSizeChanged || showThumbnailsChanged) {
       this.handleResize();
     }
     if (prevState.currentIndex !== currentIndex) {
@@ -299,9 +305,9 @@ export default class ImageGallery extends React.Component {
     window.removeEventListener('mousedown', this.handleMouseDown);
     this.removeScreenChangeEvent();
     this.removeResizeObserver();
-    if (this.intervalId) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
+    if (this.playPauseIntervalId) {
+      window.clearInterval(this.playPauseIntervalId);
+      this.playPauseIntervalId = null;
     }
     if (this.transitionTimer) {
       window.clearTimeout(this.transitionTimer);
@@ -442,37 +448,47 @@ export default class ImageGallery extends React.Component {
 
   getTranslateXForTwoSlide(index) {
     // For taking care of infinite swipe when there are only two slides
-    const { currentIndex, offsetPercentage, previousIndex } = this.state;
+    const { currentIndex, currentSlideOffset, previousIndex } = this.state;
+    const indexChanged = currentIndex !== previousIndex;
+    const firstSlideWasPrevSlide = index === 0 && previousIndex === 0;
+    const secondSlideWasPrevSlide = index === 1 && previousIndex === 1;
+    const firstSlideIsNextSlide = index === 0 && currentIndex === 1;
+    const secondSlideIsNextSlide = index === 1 && currentIndex === 0;
+    const swipingEnded = currentSlideOffset === 0;
     const baseTranslateX = -100 * currentIndex;
-    let translateX = baseTranslateX + (index * 100) + offsetPercentage;
+    let translateX = baseTranslateX + (index * 100) + currentSlideOffset;
 
     // keep track of user swiping direction
-    if (offsetPercentage > 0) {
+    // important to understand how to translateX based on last direction
+    if (currentSlideOffset > 0) {
       this.direction = 'left';
-    } else if (offsetPercentage < 0) {
+    } else if (currentSlideOffset < 0) {
       this.direction = 'right';
     }
 
-    // when swiping make sure the slides are on the correct side
-    if (currentIndex === 0 && index === 1 && offsetPercentage > 0) {
-      translateX = -100 + offsetPercentage;
-    } else if (currentIndex === 1 && index === 0 && offsetPercentage < 0) {
-      translateX = 100 + offsetPercentage;
+
+    // when swiping between two slides make sure the next and prev slides
+    // are on both left and right
+    if (secondSlideIsNextSlide && currentSlideOffset > 0) { // swiping right
+      translateX = -100 + currentSlideOffset;
+    }
+    if (firstSlideIsNextSlide && currentSlideOffset < 0) { // swiping left
+      translateX = 100 + currentSlideOffset;
     }
 
-    if (currentIndex !== previousIndex) {
-      // when swiped move the slide to the correct side
-      if (previousIndex === 0 && index === 0 && offsetPercentage === 0 && this.direction === 'left') {
+    if (indexChanged) {
+      // when indexChanged move the slide to the correct side
+      if (firstSlideWasPrevSlide && swipingEnded && this.direction === 'left') {
         translateX = 100;
-      } else if (previousIndex === 1 && index === 1 && offsetPercentage === 0 && this.direction === 'right') {
+      } else if (secondSlideWasPrevSlide && swipingEnded && this.direction === 'right') {
         translateX = -100;
       }
     } else {
-      // keep the slide on the correct slide even when not a swipe
-      if (currentIndex === 0 && index === 1 && offsetPercentage === 0 && this.direction === 'left') {
+      // keep the slide on the correct side if the swipe was not successful
+      if (secondSlideIsNextSlide && swipingEnded && this.direction === 'left') {
         translateX = -100;
       }
-      if (currentIndex === 1 && index === 0 && offsetPercentage === 0 && this.direction === 'right') {
+      if (firstSlideIsNextSlide && swipingEnded && this.direction === 'right') {
         translateX = 100;
       }
     }
@@ -489,7 +505,7 @@ export default class ImageGallery extends React.Component {
   }
 
   getSlideStyle(index) {
-    const { currentIndex, offsetPercentage, slideStyle } = this.state;
+    const { currentIndex, currentSlideOffset, slideStyle } = this.state;
     const {
       infinite,
       items,
@@ -501,17 +517,17 @@ export default class ImageGallery extends React.Component {
 
     // calculates where the other slides belong based on currentIndex
     // if it is RTL the base line should be reversed
-    let translateX = (baseTranslateX + (index * 100)) * (isRTL ? -1 : 1) + offsetPercentage;
+    let translateX = (baseTranslateX + (index * 100)) * (isRTL ? -1 : 1) + currentSlideOffset;
 
     if (infinite && items.length > 2) {
       if (currentIndex === 0 && index === totalSlides) {
         // make the last slide the slide before the first
         // if it is RTL the base line should be reversed
-        translateX = -100 * (isRTL ? -1 : 1) + offsetPercentage;
+        translateX = -100 * (isRTL ? -1 : 1) + currentSlideOffset;
       } else if (currentIndex === totalSlides && index === 0) {
         // make the first slide the slide after the last
         // if it is RTL the base line should be reversed
-        translateX = 100 * (isRTL ? -1 : 1) + offsetPercentage;
+        translateX = 100 * (isRTL ? -1 : 1) + currentSlideOffset;
       }
     }
 
@@ -566,10 +582,11 @@ export default class ImageGallery extends React.Component {
     };
   }
 
-  getSlideItems(items) {
+  getSlideItems() {
     const { currentIndex } = this.state;
     const {
       infinite,
+      items,
       slideOnThumbnailOver,
       onClick,
       lazyLoad,
@@ -605,7 +622,7 @@ export default class ImageGallery extends React.Component {
 
       const slide = (
         <div
-          key={`slide-${item.original}`}
+          key={`slide-${item.original}-${index}`}
           tabIndex="-1"
           className={`image-gallery-slide ${alignment} ${originalClass}`}
           style={slideStyle}
@@ -640,7 +657,7 @@ export default class ImageGallery extends React.Component {
         );
         thumbnails.push(
           <button
-            key={`thumbnail-${item.original}`}
+            key={`thumbnail-${item.original}-${index}`}
             type="button"
             tabIndex="0"
             aria-pressed={currentIndex === index ? 'true' : 'false'}
@@ -673,7 +690,7 @@ export default class ImageGallery extends React.Component {
         bullets.push(
           <button
             type="button"
-            key={`bullet-${item.original}`}
+            key={`bullet-${item.original}-${index}`}
             className={igBulletClass}
             onClick={bulletOnClick}
             aria-pressed={currentIndex === index ? 'true' : 'false'}
@@ -806,9 +823,9 @@ export default class ImageGallery extends React.Component {
     if (!isTransitioning && !scrollingUpDown) {
       const side = dir === RIGHT ? 1 : -1;
 
-      let offsetPercentage = (absX / galleryWidth * 100);
-      if (Math.abs(offsetPercentage) >= 100) {
-        offsetPercentage = 100;
+      let currentSlideOffset = (absX / galleryWidth * 100);
+      if (Math.abs(currentSlideOffset) >= 100) {
+        currentSlideOffset = 100;
       }
 
       const swipingTransition = {
@@ -816,19 +833,19 @@ export default class ImageGallery extends React.Component {
       };
 
       this.setState({
-        offsetPercentage: side * offsetPercentage,
+        currentSlideOffset: side * currentSlideOffset,
         slideStyle: swipingTransition,
       });
     } else {
       // don't move the slide
-      this.setState({ offsetPercentage: 0 });
+      this.setState({ currentSlideOffset: 0 });
     }
   }
 
   sufficientSwipe() {
-    const { offsetPercentage } = this.state;
+    const { currentSlideOffset } = this.state;
     const { swipeThreshold } = this.props;
-    return Math.abs(offsetPercentage) > swipeThreshold;
+    return Math.abs(currentSlideOffset) > swipeThreshold;
   }
 
   handleOnSwiped({ event, dir, velocity }) {
@@ -894,13 +911,13 @@ export default class ImageGallery extends React.Component {
 
     switch (key) {
       case LEFT_ARROW:
-        if (this.canSlideLeft() && !this.intervalId) {
-          this.slideLeft();
+        if (this.canSlideLeft() && !this.playPauseIntervalId) {
+          this.slideLeft(event);
         }
         break;
       case RIGHT_ARROW:
-        if (this.canSlideRight() && !this.intervalId) {
-          this.slideRight();
+        if (this.canSlideRight() && !this.playPauseIntervalId) {
+          this.slideRight(event);
         }
         break;
       case ESC_KEY:
@@ -973,7 +990,7 @@ export default class ImageGallery extends React.Component {
   }
 
   togglePlay() {
-    if (this.intervalId) {
+    if (this.playPauseIntervalId) {
       this.pause();
     } else {
       this.play();
@@ -985,23 +1002,25 @@ export default class ImageGallery extends React.Component {
     /*
       handles screen change events that the browser triggers e.g. esc key
     */
-    const { onScreenChange } = this.props;
+    const { onScreenChange, useBrowserFullscreen } = this.props;
     const fullScreenElement = document.fullscreenElement
       || document.msFullscreenElement
       || document.mozFullScreenElement
       || document.webkitFullscreenElement;
 
-    if (onScreenChange) onScreenChange(fullScreenElement);
-    this.setState({ isFullscreen: !!fullScreenElement });
+    // check if screenchange element is the gallery
+    const isFullscreen = this.imageGallery.current === fullScreenElement;
+    if (onScreenChange) onScreenChange(isFullscreen);
+    if (useBrowserFullscreen) this.setState({ isFullscreen });
   }
 
   slideToIndex(index, event) {
     const { currentIndex, isTransitioning } = this.state;
-    const { items, slideDuration } = this.props;
+    const { items, slideDuration, onBeforeSlide } = this.props;
 
     if (!isTransitioning) {
       if (event) {
-        if (this.intervalId) {
+        if (this.playPauseIntervalId) {
           // user triggered event while ImageGallery is playing, reset interval
           this.pause(false);
           this.play(false);
@@ -1016,42 +1035,80 @@ export default class ImageGallery extends React.Component {
         nextIndex = 0;
       }
 
+      if (onBeforeSlide && nextIndex !== currentIndex) {
+        onBeforeSlide(nextIndex);
+      }
+
       this.setState({
         previousIndex: currentIndex,
         currentIndex: nextIndex,
         isTransitioning: nextIndex !== currentIndex,
-        offsetPercentage: 0,
+        currentSlideOffset: 0,
         slideStyle: { transition: `all ${slideDuration}ms ease-out` },
       }, this.onSliding);
     }
   }
 
-  slideLeft() {
+  slideLeft(event) {
     const { isRTL } = this.props;
     if (isRTL) {
-      this.slideNext();
+      this.slideNext(event);
     } else {
-      this.slidePrevious();
+      this.slidePrevious(event);
     }
   }
 
-  slideRight() {
+  slideRight(event) {
     const { isRTL } = this.props;
     if (isRTL) {
-      this.slidePrevious();
+      this.slidePrevious(event);
     } else {
-      this.slideNext();
+      this.slideNext(event);
     }
   }
 
   slidePrevious(event) {
-    const { currentIndex } = this.state;
-    this.slideToIndex(currentIndex - 1, event);
+    const { currentIndex, currentSlideOffset, isTransitioning } = this.state;
+    const { items } = this.props;
+    const nextIndex = currentIndex - 1;
+
+    if (isTransitioning) return;
+
+    if (items.length === 2) {
+      /*
+        When there are only 2 slides fake a tiny swipe to get the slides
+        on the correct side for transitioning
+      */
+      this.setState({
+        currentSlideOffset: currentSlideOffset + 0.001, // this will reset once index changes
+        slideStyle: { transition: 'none' }, // move the slide over instantly
+      }, () => {
+        // add 25ms timeout to avoid delay in moving slides over
+        window.setTimeout(() => this.slideToIndex(nextIndex, event), 25);
+      });
+    } else {
+      this.slideToIndex(nextIndex, event);
+    }
   }
 
   slideNext(event) {
-    const { currentIndex } = this.state;
-    this.slideToIndex(currentIndex + 1, event);
+    const { currentIndex, currentSlideOffset, isTransitioning } = this.state;
+    const { items } = this.props;
+    const nextIndex = currentIndex + 1;
+
+    if (isTransitioning) return;
+
+    if (items.length === 2) {
+      // same as above for 2 slides
+      this.setState({
+        currentSlideOffset: currentSlideOffset - 0.001,
+        slideStyle: { transition: 'none' },
+      }, () => {
+        window.setTimeout(() => this.slideToIndex(nextIndex, event), 25);
+      });
+    } else {
+      this.slideToIndex(nextIndex, event);
+    }
   }
 
   handleThumbnailMouseOver(event, index) {
@@ -1152,9 +1209,9 @@ export default class ImageGallery extends React.Component {
       slideDuration,
     } = this.props;
     const { currentIndex } = this.state;
-    if (!this.intervalId) {
+    if (!this.playPauseIntervalId) {
       this.setState({ isPlaying: true });
-      this.intervalId = window.setInterval(
+      this.playPauseIntervalId = window.setInterval(
         this.pauseOrPlay,
         Math.max(slideInterval, slideDuration),
       );
@@ -1167,9 +1224,9 @@ export default class ImageGallery extends React.Component {
   pause(shouldCallOnPause = true) {
     const { onPause } = this.props;
     const { currentIndex } = this.state;
-    if (this.intervalId) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
+    if (this.playPauseIntervalId) {
+      window.clearInterval(this.playPauseIntervalId);
+      this.playPauseIntervalId = null;
       this.setState({ isPlaying: false });
       if (onPause && shouldCallOnPause) {
         onPause(currentIndex);
@@ -1191,22 +1248,34 @@ export default class ImageGallery extends React.Component {
     return false;
   }
 
+  handleImageLoaded(event, item) {
+    const { onImageLoad } = this.props;
+    const imageExists = this.loadedImages[item.original];
+    if (!imageExists && onImageLoad) {
+      this.loadedImages[item.original] = true; // prevent from call again
+      // image just loaded, call onImageLoad
+      onImageLoad(event);
+    }
+  }
+
   renderItem(item) {
-    const { onImageError, onImageLoad } = this.props;
+    const { isFullscreen } = this.state;
+    const { onImageError } = this.props;
     const handleImageError = onImageError || this.handleImageError;
+    const itemSrc = isFullscreen ? (item.fullscreen || item.original) : item.original;
 
     return (
       <div>
         {
           item.imageSet ? (
             <picture
-              onLoad={!this.isImageLoaded(item) ? onImageLoad : null}
+              onLoad={event => this.handleImageLoaded(event, item)}
               onError={handleImageError}
             >
               {
-                item.imageSet.map(source => (
+                item.imageSet.map((source, index) => (
                   <source
-                    key={source.media}
+                    key={`media-${source.srcSet}-${index}`}
                     media={source.media}
                     srcSet={source.srcSet}
                     type={source.type}
@@ -1216,18 +1285,18 @@ export default class ImageGallery extends React.Component {
               <img
                 className="image-gallery-image"
                 alt={item.originalAlt}
-                src={item.original}
+                src={itemSrc}
               />
             </picture>
           ) : (
             <img
               className="image-gallery-image"
-              src={item.original}
+              src={itemSrc}
               alt={item.originalAlt}
               srcSet={item.srcSet}
               sizes={item.sizes}
               title={item.originalTitle}
-              onLoad={!this.isImageLoaded(item) ? onImageLoad : null}
+              onLoad={event => this.handleImageLoaded(event, item)}
               onError={handleImageError}
             />
           )
@@ -1296,7 +1365,7 @@ export default class ImageGallery extends React.Component {
     } = this.props;
 
     const thumbnailStyle = this.getThumbnailStyle();
-    const { slides, thumbnails, bullets } = this.getSlideItems(items);
+    const { slides, thumbnails, bullets } = this.getSlideItems();
     const slideWrapperClass = clsx(
       'image-gallery-slide-wrapper',
       thumbnailPosition,
@@ -1311,15 +1380,14 @@ export default class ImageGallery extends React.Component {
             <React.Fragment>
               {
                 showNav && (
-                  <span key="navigation">
+                  <React.Fragment>
                     {renderLeftNav(this.slideLeft, !this.canSlideLeft())}
                     {renderRightNav(this.slideRight, !this.canSlideRight())}
-                  </span>
+                  </React.Fragment>
                 )
               }
               <Swipeable
                 className="image-gallery-swipe"
-                key="swipeable"
                 delta={0}
                 onSwiping={this.handleSwiping}
                 onSwiped={this.handleOnSwiped}