Add vertical swiping feedback and enhancements

example/App.jsx

@@ -16,7 +16,7 @@ class App extends React.Component {
       showThumbnails: true,
       showFullscreenButton: true,
       showGalleryFullscreenButton: true,
-      showPlayButton: true,
+      showPlayButton: false,
       showGalleryPlayButton: true,
       showNav: true,
       slideVertically: false,

src/components/ImageGallery.jsx

@@ -45,6 +45,7 @@ class ImageGallery extends React.Component {
       thumbsSwipedTranslate: 0,
       currentSlideOffset: 0,
       galleryWidth: 0,
+      galleryHeight: 0,
       thumbnailsWrapperWidth: 0,
       thumbnailsWrapperHeight: 0,
       thumbsStyle: { transition: `all ${props.slideDuration}ms ease-out` },
@@ -63,7 +64,6 @@ class ImageGallery extends React.Component {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handleResize = this.handleResize.bind(this);
-    this.handleTouchMove = this.handleTouchMove.bind(this);
     this.handleOnSwiped = this.handleOnSwiped.bind(this);
     this.handleScreenChange = this.handleScreenChange.bind(this);
     this.handleSwiping = this.handleSwiping.bind(this);
@@ -103,9 +103,6 @@ class ImageGallery extends React.Component {
       this.imageGallery.current.addEventListener("keydown", this.handleKeyDown);
     }
     window.addEventListener("mousedown", this.handleMouseDown);
-    window.addEventListener("touchmove", this.handleTouchMove, {
-      passive: false,
-    });
     // we're using resize observer to help with detecting containers size changes as images load
     this.initSlideWrapperResizeObserver(this.imageGallerySlideWrapper);
     this.initThumbnailWrapperResizeObserver(this.thumbnailsWrapper);
@@ -207,7 +204,6 @@ class ImageGallery extends React.Component {
   componentWillUnmount() {
     const { useWindowKeyDown } = this.props;
     window.removeEventListener("mousedown", this.handleMouseDown);
-    window.removeEventListener("touchmove", this.handleTouchMove);
     this.removeScreenChangeEvent();
     this.removeResizeObserver();
     if (this.playPauseIntervalId) {
@@ -475,9 +471,9 @@ class ImageGallery extends React.Component {
   }
 
   getSlideStyle(index) {
-    const { currentIndex, currentSlideOffset, slideStyle } =
-      this.state;
-    const { infinite, items, useTranslate3D, isRTL, slideVertically } = this.props;
+    const { currentIndex, currentSlideOffset, slideStyle } = this.state;
+    const { infinite, items, useTranslate3D, isRTL, slideVertically } =
+      this.props;
     const baseTranslateX = -100 * currentIndex;
     const totalSlides = items.length - 1;
 
@@ -787,11 +783,12 @@ class ImageGallery extends React.Component {
     return currentIndex < items.length - 1;
   }
 
-  handleSwiping({ event, absX, dir }) {
+  handleSwiping({ event, absX, absY, dir }) {
     const { disableSwipe, stopPropagation, swipingTransitionDuration } =
       this.props;
     const {
       galleryWidth,
+      galleryHeight,
       isTransitioning,
       swipingUpDown,
       swipingLeftRight,
@@ -834,6 +831,9 @@ class ImageGallery extends React.Component {
       const side = sides[dir];
 
       let currentSlideOffset = (absX / galleryWidth) * 100;
+      if (slideVertically) {
+        currentSlideOffset = (absY / galleryHeight) * 100;
+      }
 
       if (Math.abs(currentSlideOffset) >= 100) {
         currentSlideOffset = 100;
@@ -1022,14 +1022,6 @@ class ImageGallery extends React.Component {
     this.unthrottledSlideToIndex(slideTo);
   }
 
-  handleTouchMove(event) {
-    const { swipingLeftRight } = this.state;
-    if (swipingLeftRight) {
-      // prevent background scrolling up and down while swiping left and right
-      event.preventDefault();
-    }
-  }
-
   handleMouseDown() {
     // keep track of mouse vs keyboard usage for a11y
     this.imageGallery.current.classList.add("image-gallery-using-mouse");
@@ -1113,7 +1105,10 @@ class ImageGallery extends React.Component {
     }
 
     if (this.imageGallery && this.imageGallery.current) {
-      this.setState({ galleryWidth: this.imageGallery.current.offsetWidth });
+      this.setState({
+        galleryWidth: this.imageGallery.current.offsetWidth,
+        galleryHeight: this.imageGallery.current.offsetHeight,
+      });
     }
 
     if (
@@ -1472,14 +1467,8 @@ class ImageGallery extends React.Component {
   }
 
   render() {
-    const {
-      currentIndex,
-      isFullscreen,
-      modalFullscreen,
-      isPlaying,
-    } = this.state;
-
-    const { slideVertically } = this.props;
+    const { currentIndex, isFullscreen, modalFullscreen, isPlaying } =
+      this.state;
 
     const {
       additionalClass,
@@ -1500,6 +1489,7 @@ class ImageGallery extends React.Component {
       showThumbnails,
       showNav,
       showPlayButton,
+      slideVertically,
       renderPlayPauseButton,
     } = this.props;
 
@@ -1511,6 +1501,10 @@ class ImageGallery extends React.Component {
       { "image-gallery-rtl": isRTL }
     );
 
+    const bulletsClass = clsx("image-gallery-bullets", {
+      "image-gallery-bullets-vertical": slideVertically,
+    });
+
     const slideWrapper = (
       <div ref={this.imageGallerySlideWrapper} className={slideWrapperClass}>
         {renderCustomControls && renderCustomControls()}
@@ -1532,21 +1526,15 @@ class ImageGallery extends React.Component {
               onSwiping={this.handleSwiping}
               onSwiped={this.handleOnSwiped}
             >
-              <div
-                className="image-gallery-slides"
-                // disable touch-action for touch screen devices when vertical sliding is active
-                style={{ touchAction: slideVertically ? "none" : "unset" }}
-              >
-                {slides}
-              </div>
+              <div className="image-gallery-slides">{slides}</div>
             </SwipeWrapper>
           </React.Fragment>
         ) : (
           <div className="image-gallery-slides">{slides}</div>
         )}
         {showPlayButton && renderPlayPauseButton(this.togglePlay, isPlaying)}
         {showBullets && (
-          <div className="image-gallery-bullets">
+          <div className={bulletsClass}>
             <div
               className="image-gallery-bullets-container"
               role="navigation"

styles/scss/image-gallery.scss

@@ -3,20 +3,20 @@ $ig-xsmall-screen: 480px !default;
 $ig-white: #fff !default;
 $ig-black: #000 !default;
 $ig-blue: #337ab7 !default;
-$ig-background-black: rgba(0, 0, 0, .4) !default;
+$ig-background-black: rgba(0, 0, 0, 0.4) !default;
 $ig-transparent: rgba(0, 0, 0, 0) !default;
 $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 
 @mixin vendor-prefix($name, $value) {
-  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
+  @each $vendor in ("-webkit-", "-moz-", "-ms-", "-o-", "") {
     #{$vendor}#{$name}: #{$value};
   }
 }
 
 // SVG ICON STYLES
 .image-gallery-icon {
   color: $ig-white;
-  transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -94,26 +94,26 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 
   .image-gallery-svg {
     height: 120px;
-    width: 60px;
+    width: 90px;
   }
 
   @media (max-width: $ig-small-screen) {
     .image-gallery-svg {
       height: 72px;
-      width: 36px;
+      width: 48px;
     }
   }
 
   @media (max-width: $ig-xsmall-screen) {
     .image-gallery-svg {
       height: 48px;
-      width: 24px;
+      width: 36px;
     }
   }
 
   &[disabled] {
     cursor: disabled;
-    opacity: .6;
+    opacity: 0.6;
     pointer-events: none;
   }
 }
@@ -153,7 +153,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 
   &[disabled] {
     cursor: disabled;
-    opacity: .6;
+    opacity: 0.6;
     pointer-events: none;
   }
 }
@@ -168,7 +168,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 // End of Icon styles
 
 .image-gallery {
-  @include vendor-prefix('user-select', none);
+  @include vendor-prefix("user-select", none);
   -webkit-tap-highlight-color: $ig-transparent;
   position: relative;
 
@@ -234,6 +234,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   position: relative;
   white-space: nowrap;
   text-align: center;
+  touch-action: none; // prevent scrolling when touching gallery
 }
 
 .image-gallery-slide {
@@ -263,10 +264,9 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 
     @media (max-width: $ig-small-screen) {
       bottom: 45px;
-      font-size: .8em;
+      font-size: 0.8em;
       padding: 8px 15px;
     }
-
   }
 }
 
@@ -296,7 +296,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
     margin: 0 5px;
     outline: none;
     padding: 5px;
-    transition: all .2s ease-out;
+    transition: all 0.2s ease-out;
 
     @media (max-width: $ig-small-screen) {
       margin: 0 3px;
@@ -330,6 +330,29 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
       }
     }
   }
+
+  &.image-gallery-bullets-vertical {
+    left: 20px;
+    right: auto;
+    bottom: auto;
+    width: auto;
+    top: 50%;
+    transform: translateY(-50%);
+
+    .image-gallery-bullet {
+      display: block;
+      margin: 12px 0;
+
+      @media (max-width: $ig-small-screen) {
+        margin: 6px 0px;
+        padding: 3px;
+      }
+
+      @media (max-width: $ig-xsmall-screen) {
+        padding: 2.7px;
+      }
+    }
+  }
 }
 
 .image-gallery-thumbnails-wrapper {
@@ -373,9 +396,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
           margin-left: 0;
           margin-top: 2px;
         }
-
       }
-
     }
   }
 
@@ -402,13 +423,12 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
     text-align: center;
     white-space: nowrap;
   }
-
 }
 
 .image-gallery-thumbnail {
   display: inline-block;
   border: 4px solid transparent;
-  transition: border .3s ease-out;
+  transition: border 0.3s ease-out;
   width: 100px;
   background: transparent;
   padding: 0;
@@ -453,7 +473,6 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
       }
     }
   }
-
 }
 
 .image-gallery-thumbnail-label {
@@ -470,9 +489,9 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   white-space: normal;
   width: 100%;
 
-  @media(max-width: $ig-small-screen) {
-    font-size: .8em;
-    line-height: .8em;
+  @media (max-width: $ig-small-screen) {
+    font-size: 0.8em;
+    line-height: 0.8em;
   }
 }
 
@@ -486,8 +505,8 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   top: 0;
   z-index: 4;
 
-  @media(max-width: $ig-small-screen) {
-    font-size: .8em;
+  @media (max-width: $ig-small-screen) {
+    font-size: 0.8em;
     padding: 5px 10px;
   }
-}
+}