added slider

revengemiroz · May 16, 2020 · 9682a3f · 9682a3f
1 parent 21c9d0b
commit 9682a3f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 22 deletions.
diff --git a/Slider1/design/desktop-preview.jpg b/Slider1/design/desktop-preview.jpg
diff --git a/Slider1/index.js b/Slider1/index.js
@@ -14,38 +14,72 @@ newImg.onload = function () {
     slider.src = this.src;
     console.log(`width : ${this.width},height : ${this.height}`)
 
-    dimension(this.width, this.height)
+    dimension(this.width, this.height, 10, 5, 300, 600, 800)
 }
 newImg.src = `${imagePath[0]}`
 
 imgId.innerText = '1'
 let counter = 0;
 
 function dimension(w, h) {
-    if (w == 4912 && h == 7360) {
-        container.style.width = `${w / 10}px`
-        container.style.height = `${h / 10}px`
+    if (window.screen.width < 500) {
+        if (w == 4912 && h == 7360) {
+            container.style.width = `${w / 12.6}px`
+            container.style.height = `${h / 10}px`
+        }
+
+        else if (w > 4800 && h > 3500) {
+            container.style.width = `${w / 15.5}px`
+            container.style.height = `${h / 11}px`
+        }
+
+        else if (w == 750 && h == 750) {
+            container.style.width = `${w - 370}px`
+            container.style.height = `${h - 150}px`
+        }
+
+        else if (w < 800 && w < 800) {
+            container.style.width = `${w - 270}px`
+            container.style.height = `${h - 200}px`
+        }
+
+        else if (w > 600 && w < 1200) {
+            container.style.width = `${w - 700}px`
+            container.style.height = `${h - 460}px`
+        }
+
+        else {
+            container.style.width = `${w - 850}px`
+            container.style.height = `${h - 1020}px`
+        }
     }
-
-    else if (w > 4800 && h > 3500) {
-        container.style.width = `${w / 5}px`
-        container.style.height = `${h / 5}px`
-    }
-
-    else if (w < 800 && w < 800) {
-        container.style.width = `${w}px`
-        container.style.height = `${h}px`
-    }
-
-    else if (w > 600 && w < 1200) {
-        container.style.width = `${w - 300}px`
-        container.style.height = `${h - 300}px`
-    }
-
     else {
-        container.style.width = `${w - 600}px`
-        container.style.height = `${h - 800}px`
+        if (w == 4912 && h == 7360) {
+            container.style.width = `${w / 10}px`
+            container.style.height = `${h / 10}px`
+        }
+
+        else if (w > 4800 && h > 3500) {
+            container.style.width = `${w / 5}px`
+            container.style.height = `${h / 5}px`
+        }
+
+        else if (w < 800 && w < 800) {
+            container.style.width = `${w}px`
+            container.style.height = `${h}px`
+        }
+
+        else if (w > 600 && w < 1200) {
+            container.style.width = `${w - 300}px`
+            container.style.height = `${h - 300}px`
+        }
+
+        else {
+            container.style.width = `${w - 600}px`
+            container.style.height = `${h - 800}px`
+        }
     }
+
 }
 
 function inc(count) {