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

fix flickering on ssr
femioladeji · May 8, 2022 · c15df4f · c15df4f
2 parents 0004e85 + d9a0020
commit c15df4f
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
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.7.4",
+  "version": "3.7.5",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -121,7 +121,7 @@
 .react-slideshow-wrapper
   .react-slideshow-fade-images-wrap
   > div[aria-hidden='true'] {
-  visibility: hidden;
+  display: none;
 }
 
 .react-slideshow-wrapper.slide {
@@ -138,7 +138,7 @@
 }
 
 .react-slideshow-wrapper .images-wrap > div[aria-hidden='true'] {
-  visibility: hidden;
+  display: none;
 }
 
 .react-slideshow-zoom-wrapper {
@@ -163,5 +163,5 @@
 }
 
 .react-slideshow-zoom-wrapper .zoom-wrapper > div[aria-hidden='true'] {
-  visibility: hidden;
+  display: none;
 }
diff --git a/src/fade.js b/src/fade.js
@@ -116,7 +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`;
+          eachDiv.style.display = `block`;
         }
       }
     }

diff --git a/src/slide.js b/src/slide.js
@@ -190,7 +190,7 @@ class Slideshow extends Component {
   applySlideStyle() {
     this.allImages.forEach((eachImage, index) => {
       eachImage.style.width = `${this.width}px`;
-      eachImage.style.visibility = `visible`;
+      eachImage.style.display = `block`;
     });
   }
 

diff --git a/src/zoom.js b/src/zoom.js
@@ -115,7 +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`;
+          eachDiv.style.display = `block`;
         }
       }
     }