completed dubble vartical slider

tsr-kairi · Jul 15, 2021 · 1e321bf · 1e321bf
1 parent 984b72b
commit 1e321bf
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 22 deletions.
diff --git a/Day 26 - Double Vertical Slider/app.js b/Day 26 - Double Vertical Slider/app.js
@@ -1,6 +1,35 @@
-// block Elements and variables..
+const sliderContainer = document.querySelector(".slider-container");
+const slideRight = document.querySelector(".right-slide");
+const slideLeft = document.querySelector(".left-slide");
+const upButton = document.querySelector(".up-button");
+const downButton = document.querySelector(".down-button");
+const slidesLength = slideRight.querySelectorAll("div").length;
 
+let activeSlideIndex = 0;
 
+slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;
 
-// Functions..
+upButton.addEventListener("click", () => changeSlide("up"));
+downButton.addEventListener("click", () => changeSlide("down"));
 
+const changeSlide = (direction) => {
+  const sliderHeight = sliderContainer.clientHeight;
+  if (direction === "up") {
+    activeSlideIndex++;
+    if (activeSlideIndex > slidesLength - 1) {
+      activeSlideIndex = 0;
+    }
+  } else if (direction === "down") {
+    activeSlideIndex--;
+    if (activeSlideIndex < 0) {
+      activeSlideIndex = slidesLength - 1;
+    }
+  }
+
+  slideRight.style.transform = `translateY(-${
+    activeSlideIndex * sliderHeight
+  }px)`;
+  slideLeft.style.transform = `translateY(${
+    activeSlideIndex * sliderHeight
+  }px)`;
+};
diff --git a/Day 26 - Double Vertical Slider/index.html b/Day 26 - Double Vertical Slider/index.html
@@ -2,21 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
       rel="stylesheet"
     />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
     />
-    <link rel="stylesheet" href="./style.css" />
-    <title>Vertical | Slider</title>
+    <link rel="stylesheet" href="style.css" />
+    <title>Vertical Slider</title>
   </head>
   <body>
     <div class="slider-container">
@@ -25,17 +21,14 @@
           <h1>Nature flower</h1>
           <p>all in pink</p>
         </div>
-
         <div style="background-color: #2a86ba">
-          <h1>Blue sky</h1>
+          <h1>Bluuue Sky</h1>
           <p>with it's mountains</p>
         </div>
-
         <div style="background-color: #252e33">
           <h1>Lonely castle</h1>
           <p>in the wilderness</p>
         </div>
-
         <div style="background-color: #ffb866">
           <h1>Flying eagle</h1>
           <p>in the sunset</p>
@@ -44,22 +37,22 @@ <h1>Flying eagle</h1>
       <div class="right-slide">
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');
+            background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1559906727-76b9259eb4e2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');
+            background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1454335459109-cd8a2c230bc2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=802&q=80');
+            background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1432634372475-07b399e372ee?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');
+            background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80');
           "
         ></div>
       </div>
@@ -73,6 +66,6 @@ <h1>Flying eagle</h1>
       </div>
     </div>
 
-    <script src="./app.js"></script>
+    <script src="app.js"></script>
   </body>
 </html>
diff --git a/Day 26 - Double Vertical Slider/style.css b/Day 26 - Double Vertical Slider/style.css
@@ -6,7 +6,7 @@
 }
 
 body {
-  font-family: "Open Sans";
+  font-family: "Open Sans", sans-serif;
   height: 100vh;
 }
 
@@ -23,6 +23,7 @@ body {
   position: absolute;
   top: 0;
   left: 0;
+  transition: transform 0.5s ease-in-out;
 }
 
 .left-slide > div {
@@ -36,7 +37,7 @@ body {
 }
 
 .left-slide h1 {
-  font-size: 30px;
+  font-size: 40px;
   margin-bottom: 10px;
   margin-top: -30px;
 }
@@ -45,8 +46,9 @@ body {
   height: 100%;
   position: absolute;
   top: 0;
-  left: 35px;
+  left: 35%;
   width: 65%;
+  transition: transform 0.5s ease-in-out;
 }
 
 .right-slide > div {
@@ -76,7 +78,7 @@ button:focus {
 
 .slider-container .action-buttons button {
   position: absolute;
-  left: 35px;
+  left: 35%;
   top: 50%;
   z-index: 100;
 }