Merge pull request khushi-purwar#975 from iamrahulmahato/double

Two Vertical Slider
BhoomikaSahu · Apr 25, 2022 · 833a0c6 · 833a0c6
2 parents 4164ea0 + 296d5ea
commit 833a0c6
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 0 deletions.
diff --git a/Two Vertical Slider/README.md b/Two Vertical Slider/README.md
@@ -0,0 +1,35 @@
+<p align="center">
+    <img alt="" height="80" src="./img/add-readme (1).png">
+  </a>
+</p>
+<h1 align="center">Two Vertical Slider</h1>
+
+<div align="center">
+  Two Vertical Slider written in HTML, CSS and JavaScript .
+</div>
+
+<br />
+
+<div align="center">
+  <!-- Standard -->
+  <a href="https://standardjs.com">
+    <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square"
+      alt="Standard" />
+  </a>
+</div>
+
+## ⚡️  Introduction
+Slide the two different parts of the webpage content at the same time
+
+
+## Tech Stack used:
+* HTML
+* CSS
+* JavaScript
+
+## 📷 Screenshots
+
+![ss1](./img/sc.1.jpeg)
+![ss2](./img/sc.2.jpeg)
+
+
diff --git a/Two Vertical Slider/css/style.css b/Two Vertical Slider/css/style.css
@@ -0,0 +1,96 @@
+    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        font-family: 'Open Sans', sans-serif;
+        height: 100vh;
+    }
+
+    .slider-container {
+        position: relative;
+        overflow: hidden;
+        width: 100vw;
+        height: 100vh;
+    }
+
+    .left-slide {
+        height: 100%;
+        width: 35%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition: transform 0.5s ease-in-out;
+    }
+
+    .left-slide>div {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+    }
+
+    .left-slide h1 {
+        font-size: 40px;
+        margin-bottom: 10px;
+        margin-top: -30px;
+    }
+
+    .right-slide {
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 35%;
+        width: 65%;
+        transition: transform 0.5s ease-in-out;
+    }
+
+    .right-slide>div {
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+        height: 100%;
+        width: 100%;
+    }
+
+    button {
+        background-color: #fff;
+        border: none;
+        color: #aaa;
+        cursor: pointer;
+        font-size: 16px;
+        padding: 15px;
+    }
+
+    button:hover {
+        color: #222;
+    }
+
+    button:focus {
+        outline: none;
+    }
+
+    .slider-container .action-buttons button {
+        position: absolute;
+        left: 35%;
+        top: 50%;
+        z-index: 100;
+    }
+
+    .slider-container .action-buttons .down-button {
+        transform: translateX(-100%);
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
+
+    .slider-container .action-buttons .up-button {
+        transform: translateY(-100%);
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
diff --git a/Two Vertical Slider/img/add-readme (1).png b/Two Vertical Slider/img/add-readme (1).png
diff --git a/Two Vertical Slider/img/sc.1.jpeg b/Two Vertical Slider/img/sc.1.jpeg
diff --git a/Two Vertical Slider/img/sc.2.jpeg b/Two Vertical Slider/img/sc.2.jpeg
diff --git a/Two Vertical Slider/index.html b/Two Vertical Slider/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
+    <link rel="stylesheet" href="./css/style.css">
+    <title>Vertical Slider</title>
+</head>
+
+<body>
+    <div class="slider-container">
+        <div class="left-slide">
+            <div style="background-color: #fd3555">
+                <h1>Nature flower</h1>
+                <p>all in pink</p>
+            </div>
+            <div style="background-color: #2a86ba">
+                <h1>Blue 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>
+            </div>
+        </div>
+        <div class="right-slide">
+            <div style="
+            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-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-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-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80');
+          "></div>
+        </div>
+        <div class="action-buttons">
+            <button class="down-button">
+          <i class="fas fa-arrow-down"></i>
+        </button>
+            <button class="up-button">
+          <i class="fas fa-arrow-up"></i>
+        </button>
+        </div>
+    </div>
+    <script src="./js/script.js"></script>
+</body>
+
+</html>
diff --git a/Two Vertical Slider/js/script.js b/Two Vertical Slider/js/script.js
@@ -0,0 +1,35 @@
+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`;
+
+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)`;
+};