support touch and drag event

femioladeji · Aug 20, 2020 · 5bd3a47 · 5bd3a47
1 parent 88d3fdc
commit 5bd3a47
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 52 deletions.
diff --git a/docs/views/codeStrings.js b/docs/views/codeStrings.js
@@ -171,7 +171,11 @@ const Slideshow = () => {
   return (
     <div>
       <Zoom {...zoomInProperties}>
-        { images.map((each, index) => <img key={index} style={{width: "100%"}} src={each} />) }
+        {images.map((each, index) => (
+          <div key={index} style={{width: "100%"}}>
+            <img style={{ objectFit: "cover", width: "100%" }} src={each} />
+          </div>
+        ))}
       </Zoom>
     </div>
   )
@@ -198,7 +202,11 @@ const Slideshow = () => {
   return (
     <div>
       <Zoom {...zoomOutProperties}>
-        { images.map((each, index) => <img key={index} style={{width: "100%"}} src={each} />) }
+        {images.map((each, index) => (
+          <div key={index} style={{width: "100%"}}>
+            <img style={{ objectFit: "cover", width: "100%" }} src={each} />
+          </div>
+        ))}
       </Zoom>
     </div>
   )
@@ -417,7 +425,7 @@ const AutoplayExample = () => {
   const style = {
     textAlign: "center",
     background: "teal",
-    padding: "200px",
+    padding: "200px 0",
     fontSize: "30px"
   }
 
@@ -461,7 +469,7 @@ const MethodsExample = () => {
   const style = {
     textAlign: "center",
     background: "teal",
-    padding: "200px",
+    padding: "200px 0",
     fontSize: "30px"
   };
 
@@ -525,7 +533,7 @@ const CallbackExample = () => {
 
   const style = {
     textAlign: "center",
-    padding: "200px",
+    padding: "200px 0",
     fontSize: "30px"
   };
 

diff --git a/docs/views/pages/Examples/Autoplay.js b/docs/views/pages/Examples/Autoplay.js
@@ -10,7 +10,7 @@ const AutoplayExample = () => {
   const style = {
     textAlign: "center",
     background: "teal",
-    padding: "200px",
+    padding: "200px 0",
     fontSize: "30px"
   }
 

diff --git a/docs/views/pages/Examples/Callback.js b/docs/views/pages/Examples/Callback.js
@@ -10,7 +10,7 @@ const CallbackExample = () => {
 
   const style = {
     textAlign: "center",
-    padding: "200px",
+    padding: "200px 0",
     fontSize: "30px"
   };
 

diff --git a/docs/views/pages/Examples/Zoom.js b/docs/views/pages/Examples/Zoom.js
@@ -28,7 +28,9 @@ const ZoomExample = () => {
       <div>
         <Zoom {...zoomInProperties}>
           {images.map((each, index) => (
-            <img key={index} style={{ width: "100%" }} src={each} />
+            <div key={index} style={{width: "100%"}}>
+              <img style={{ objectFit: "cover", width: "100%" }} src={each} />
+            </div>
           ))}
         </Zoom>
       </div>

diff --git a/docs/views/pages/Examples/ZoomOut.js b/docs/views/pages/Examples/ZoomOut.js
@@ -28,7 +28,9 @@ const ZoomExample = () => {
       <div>
         <Zoom {...zoomOutProperties}>
           {images.map((each, index) => (
-            <img key={index} style={{ width: "100%" }} src={each} />
+            <div key={index} style={{width: "100%"}}>
+              <img style={{ objectFit: "cover", width: "100%" }} src={each} />
+            </div>
           ))}
         </Zoom>
       </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-slideshow-image",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,6 +1,10 @@
 .react-slideshow-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
 .react-slideshow-container .nav {
@@ -16,23 +20,15 @@
   cursor: pointer;
   color: #fff;
   border-radius: 50%;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.react-slideshow-container .default-nav span {
-  display: block;
-  width: 10px;
-  height: 10px;
-  border-color: #000;
-  border-style: solid;
-  box-sizing: border-box;
-  transform: rotate(45deg);
-}
-
-.react-slideshow-container .default-nav.disabled span {
-  border-color: #666;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 
 .react-slideshow-container .default-nav:hover,
@@ -52,26 +48,21 @@
   border-top: none;
 }
 
-.react-slideshow-container .default-nav:first-of-type span {
-  margin-left: 5px;
-  border-right: none;
-  border-top: none;
-}
 
 .react-slideshow-container .default-nav:last-of-type {
   margin-left: -30px;
 }
 
-.react-slideshow-container .default-nav:last-of-type span {
-  margin-right: 5px;
-  border-left: none;
-  border-bottom: none;
-}
 
 .react-slideshow-container + div.indicators {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   margin-top: 20px;
 }
 
@@ -117,8 +108,11 @@
 }
 
 .react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 
 .react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap > div {
@@ -132,8 +126,11 @@
 }
 
 .react-slideshow-wrapper .images-wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 
 .react-slideshow-zoom-wrapper {
@@ -142,12 +139,17 @@
 }
 
 .react-slideshow-zoom-wrapper .zoom-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   overflow: hidden;
 }
 
 .react-slideshow-zoom-wrapper .zoom-wrapper > div {
   position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-}
+}
diff --git a/src/fade.js b/src/fade.js
@@ -169,6 +169,7 @@ class Fade extends Component {
         <div
           className="react-slideshow-container"
           onMouseEnter={this.pauseSlides}
+          onMouseOver={this.pauseSlides}
           onMouseLeave={this.startSlides}
           ref={this.reactSlideshowWrapper}
         >

diff --git a/src/helpers.js b/src/helpers.js
@@ -31,7 +31,7 @@ const showPreviousArrow = (
   const className = `nav default-nav ${isDisabled ? 'disabled' : ''}`;
   return (
     <button className={className} {...props}>
-      <span />
+      <svg width="24" height="24" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>
     </button>
   );
 };
@@ -59,7 +59,7 @@ const showNextArrow = (
   const className = `nav default-nav ${isDisabled ? 'disabled' : ''}`;
   return (
     <button className={className} {...props}>
-      <span />
+      <svg width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>
     </button>
   );
 };

diff --git a/src/slide.js b/src/slide.js
@@ -16,7 +16,8 @@ class Slideshow extends Component {
       index:
         props.defaultIndex && props.defaultIndex < props.children.length
           ? props.defaultIndex
-          : 0
+          : 0,
+      dragging: false
     };
     this.width = 0;
     this.imageContainer = null;
@@ -30,6 +31,10 @@ class Slideshow extends Component {
     this.reactSlideshowWrapper = createRef();
     this.goToSlide = this.goToSlide.bind(this);
     this.tweenGroup = new TWEEN.Group();
+    this.startSwipe = this.startSwipe.bind(this)
+    this.endSwipe = this.endSwipe.bind(this)
+    this.swipe = this.swipe.bind(this)
+    this.distanceSwiped = 0;
   }
 
   componentDidMount() {
@@ -55,6 +60,37 @@ class Slideshow extends Component {
     this.removeResizeObserver();
   }
 
+  startSwipe(e) {
+    this.startingClientX = e.touches ? e.touches[0].pageX : e.clientX
+    this.setState({ dragging: true })
+    clearTimeout(this.timeout)
+  }
+
+  endSwipe() {
+    this.setState({ dragging: false })
+    if ((Math.abs(this.distanceSwiped) / this.width) > 0.2) {
+      if (this.distanceSwiped < 0) {
+        this.goNext();
+      } else {
+        this.goBack();
+      }
+    } else {
+      if (Math.abs(this.distanceSwiped) > 0) {
+        this.slideImages(this.state.index, 300)
+      }
+    }
+  }
+
+  swipe(e) {
+    const clientX = e.touches ? e.touches[0].pageX : e.clientX;
+    if (this.state.dragging) {
+      let translateValue = this.width * (this.state.index + 1);
+      this.distanceSwiped = clientX - this.startingClientX;
+      translateValue -= this.distanceSwiped;
+      this.imageContainer.style.transform = `translate(-${translateValue}px)`;
+    }
+  }
+
   removeResizeObserver() {
     if (
       this.resizeObserver &&
@@ -109,9 +145,13 @@ class Slideshow extends Component {
   }
 
   startSlides() {
-    const { pauseOnHover, autoplay } = this.props;
-    if (pauseOnHover && autoplay) {
-      this.timeout = setTimeout(() => this.goNext(), this.props.duration);
+    if (this.state.dragging) {
+      this.endSwipe()
+    } else {
+      const { pauseOnHover, autoplay } = this.props;
+      if (pauseOnHover && autoplay) {
+        this.timeout = setTimeout(() => this.goNext(), this.props.duration);
+      }
     }
   }
 
@@ -162,7 +202,15 @@ class Slideshow extends Component {
         <div
           className="react-slideshow-container"
           onMouseEnter={this.pauseSlides}
+          onMouseOver={this.pauseSlides}
           onMouseLeave={this.startSlides}
+          onMouseDown={this.startSwipe}
+          onMouseUp={this.endSwipe}
+          onMouseMove={this.swipe}
+          onTouchStart={this.startSwipe}
+          onTouchEnd={this.endSwipe}
+          onTouchCancel={this.endSwipe}
+          onTouchMove={this.swipe}
           ref={this.reactSlideshowWrapper}
         >
           {arrows &&
@@ -212,7 +260,7 @@ class Slideshow extends Component {
     );
   }
 
-  slideImages(index) {
+  slideImages(index, animationDuration) {
     let {
       children,
       transitionDuration,
@@ -221,10 +269,11 @@ class Slideshow extends Component {
       duration,
       onChange
     } = this.props;
+    transitionDuration = animationDuration || transitionDuration;
     const existingTweens = this.tweenGroup.getAll();
     if (!existingTweens.length) {
       clearTimeout(this.timeout);
-      const value = { margin: -this.width * (this.state.index + 1) };
+      const value = { margin: (-this.width * (this.state.index + 1)) + this.distanceSwiped };
       const tween = new TWEEN.Tween(value, this.tweenGroup)
         .to({ margin: -this.width * (index + 1) }, transitionDuration)
         .onUpdate(value => {
@@ -244,6 +293,7 @@ class Slideshow extends Component {
       animate();
 
       tween.onComplete(() => {
+        this.distanceSwiped = 0;
         const newIndex =
           index < 0
             ? children.length - 1
@@ -262,6 +312,7 @@ class Slideshow extends Component {
           },
           () => {
             if (autoplay && (infinite || this.state.index < children.length)) {
+              clearTimeout(this.timeout);
               this.timeout = setTimeout(() => this.goNext(), duration);
             }
           }

diff --git a/src/zoom.js b/src/zoom.js
@@ -168,6 +168,7 @@ class Zoom extends Component {
         <div
           className="react-slideshow-container"
           onMouseEnter={this.pauseSlides}
+          onMouseOver={this.pauseSlides}
           onMouseLeave={this.startSlides}
           ref={this.reactSlideshowWrapper}
         >