Merge pull request #174 from femioladeji/fix-ssr-flickering

fix bug with ssr flickering

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-slideshow-image",
-  "version": "3.7.3",
+  "version": "3.7.4",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [

src/css/styles.css

@@ -3,8 +3,8 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .react-slideshow-container .nav {
@@ -24,11 +24,11 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .react-slideshow-container .default-nav:hover,
@@ -48,21 +48,19 @@
   border-top: none;
 }
 
-
 .react-slideshow-container .default-nav:last-of-type {
   margin-left: -30px;
 }
 
-
 .react-slideshow-container + ul.indicators {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   margin-top: 20px;
 }
 
@@ -112,14 +110,20 @@
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap > div {
   position: relative;
   opacity: 0;
 }
 
+.react-slideshow-wrapper
+  .react-slideshow-fade-images-wrap
+  > div[aria-hidden='true'] {
+  visibility: hidden;
+}
+
 .react-slideshow-wrapper.slide {
   width: 100%;
   overflow: hidden;
@@ -130,7 +134,11 @@
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.react-slideshow-wrapper .images-wrap > div[aria-hidden='true'] {
+  visibility: hidden;
 }
 
 .react-slideshow-zoom-wrapper {
@@ -143,7 +151,7 @@
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   overflow: hidden;
 }
 
@@ -153,3 +161,7 @@
   display: -ms-flexbox;
   display: flex;
 }
+
+.react-slideshow-zoom-wrapper .zoom-wrapper > div[aria-hidden='true'] {
+  visibility: hidden;
+}

src/fade.js

@@ -116,6 +116,7 @@ class Fade extends Component {
         if (eachDiv) {
           eachDiv.style.width = `${this.width}px`;
           eachDiv.style.left = `${index * -this.width}px`;
+          eachDiv.style.visibility = `visible`;
         }
       }
     }

src/slide.js

@@ -190,6 +190,7 @@ class Slideshow extends Component {
   applySlideStyle() {
     this.allImages.forEach((eachImage, index) => {
       eachImage.style.width = `${this.width}px`;
+      eachImage.style.visibility = `visible`;
     });
   }
 

src/zoom.js

@@ -115,6 +115,7 @@ class Zoom extends Component {
         if (eachDiv) {
           eachDiv.style.width = `${this.width}px`;
           eachDiv.style.left = `${index * -this.width}px`;
+          eachDiv.style.visibility = `visible`;
         }
       }
     }