Merge pull request #97 from femioladeji/touch-scroll

support touch and drag event
femioladeji · Aug 20, 2020 · 20ab1cd · 20ab1cd
2 parents 88d3fdc + 0851291
commit 20ab1cd
Show file tree

Hide file tree

Showing 16 changed files with 179 additions and 72 deletions.
diff --git a/docs/app.css b/docs/app.css
@@ -34,12 +34,19 @@ h3 {
 
 .each-fade {
   display: flex;
+  width: 100%;
 }
 
-.each-fade img {
+.each-fade > div {
   width: 75%;
 }
 
+.each-fade > div img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .each-fade p {
   width: 25%;
   font-size: 1em;

diff --git a/docs/views/codeStrings.js b/docs/views/codeStrings.js
@@ -112,16 +112,22 @@ const FadeExample = () => {
       <div className="slide-container">
         <Fade>
           <div className="each-fade">
-            <img src={fadeImages[0]} />
-            <h2>First Slide</h2>
+            <div>
+              <img src={fadeImages[0]} />
+            </div>
+            <p>First Slide</p>
           </div>
           <div className="each-fade">
-            <h2>Second Slide</h2>
-            <img src={fadeImages[1]} />
+            <p>Second Slide</p>
+            <div>
+              <img src={fadeImages[1]} />
+            </div>
           </div>
           <div className="each-fade">
-            <img src={fadeImages[2]} />
-            <h2>Third Slide</h2>
+            <div>
+              <img src={fadeImages[2]} />
+            </div>
+            <p>Third Slide</p>
           </div>
         </Fade>
       </div>
@@ -135,12 +141,19 @@ export default FadeExample;
 export const fadeEffectCSS = `
 .each-fade {
   display: flex;
+  width: 100%;
 }
 
-.each-fade  img {
+.each-fade > div {
   width: 75%;
 }
 
+.each-fade > div img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .each-fade p {
   width: 25%;
   font-size: 1em;
@@ -171,7 +184,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 +215,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>
   )
@@ -387,15 +408,21 @@ const PauseHoverExample = () => {
       <div className="slide-container">
         <Slide {...fadeProperties}>
           <div className="each-fade">
-            <img src={images[0]} />
+            <div>
+              <img src={fadeImages[0]} />
+            </div>
             <p>First Slide</p>
           </div>
           <div className="each-fade">
             <p>Second Slide</p>
-            <img src={images[1]} />
+            <div>
+              <img src={fadeImages[1]} />
+            </div>
           </div>
           <div className="each-fade">
-            <img src={images[2]} />
+            <div>
+              <img src={fadeImages[2]} />
+            </div>
             <p>Third Slide</p>
           </div>
         </Slide>
@@ -417,7 +444,7 @@ const AutoplayExample = () => {
   const style = {
     textAlign: "center",
     background: "teal",
-    padding: "200px",
+    padding: "200px 0",
     fontSize: "30px"
   }
 
@@ -461,7 +488,7 @@ const MethodsExample = () => {
   const style = {
     textAlign: "center",
     background: "teal",
-    padding: "200px",
+    padding: "200px 0",
     fontSize: "30px"
   };
 
@@ -525,7 +552,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/CustomIndicator.js b/docs/views/pages/Examples/CustomIndicator.js
@@ -37,7 +37,9 @@ const CustomIndicatorExample = () => {
       <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/docs/views/pages/Examples/Fade.js b/docs/views/pages/Examples/Fade.js
@@ -29,16 +29,22 @@ const FadeExample = () => {
       <div>
         <Fade {...fadeProperties}>
           <div className="each-fade">
-            <img src={fadeImages[0]} />
-            <h2>First Slide</h2>
+            <div>
+              <img src={fadeImages[0]} />
+            </div>
+            <p>First Slide</p>
           </div>
           <div className="each-fade">
-            <h2>Second Slide</h2>
-            <img src={fadeImages[1]} />
+            <p>Second Slide</p>
+            <div>
+              <img src={fadeImages[1]} />
+            </div>
           </div>
           <div className="each-fade">
-            <img src={fadeImages[2]} />
-            <h2>Third Slide</h2>
+            <div>
+              <img src={fadeImages[2]} />
+            </div>
+            <p>Third Slide</p>
           </div>
         </Fade>
       </div>

diff --git a/docs/views/pages/Examples/PauseHover.js b/docs/views/pages/Examples/PauseHover.js
@@ -27,15 +27,21 @@ const PauseOnHoverExample = () => {
       <div>
         <Slide {...fadeProperties}>
           <div className="each-fade">
-            <img src={fadeImages[0]} />
+            <div>
+              <img src={fadeImages[0]} />
+            </div>
             <p>First Slide</p>
           </div>
           <div className="each-fade">
             <p>Second Slide</p>
-            <img src={fadeImages[1]} />
+            <div>
+              <img src={fadeImages[1]} />
+            </div>
           </div>
           <div className="each-fade">
-            <img src={fadeImages[2]} />
+            <div>
+              <img src={fadeImages[2]} />
+            </div>
             <p>Third Slide</p>
           </div>
         </Slide>

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;
 }