diff --git a/Two Vertical Slider/README.md b/Two Vertical Slider/README.md new file mode 100644 index 000000000..53fe35c0f --- /dev/null +++ b/Two Vertical Slider/README.md @@ -0,0 +1,35 @@ +

+ + +

+

Two Vertical Slider

+ +
+ Two Vertical Slider written in HTML, CSS and JavaScript . +
+ +
+ +
+ + + Standard + +
+ +## ⚡️ 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 new file mode 100644 index 000000000..f2b70ebd4 --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/Two Vertical Slider/img/add-readme (1).png b/Two Vertical Slider/img/add-readme (1).png new file mode 100644 index 000000000..4909b495e Binary files /dev/null and b/Two Vertical Slider/img/add-readme (1).png differ diff --git a/Two Vertical Slider/img/sc.1.jpeg b/Two Vertical Slider/img/sc.1.jpeg new file mode 100644 index 000000000..7bec7b765 Binary files /dev/null and b/Two Vertical Slider/img/sc.1.jpeg differ diff --git a/Two Vertical Slider/img/sc.2.jpeg b/Two Vertical Slider/img/sc.2.jpeg new file mode 100644 index 000000000..51776df5c Binary files /dev/null and b/Two Vertical Slider/img/sc.2.jpeg differ diff --git a/Two Vertical Slider/index.html b/Two Vertical Slider/index.html new file mode 100644 index 000000000..ffceaccdb --- /dev/null +++ b/Two Vertical Slider/index.html @@ -0,0 +1,58 @@ + + + + + + + + + Vertical Slider + + + +
+
+
+

Nature flower

+

all in pink

+
+
+

Blue Sky

+

with it's mountains

+
+
+

Lonely castle

+

in the wilderness

+
+
+

Flying eagle

+

in the sunset

+
+
+
+
+
+
+
+
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/Two Vertical Slider/js/script.js b/Two Vertical Slider/js/script.js new file mode 100644 index 000000000..f954310d4 --- /dev/null +++ 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)`; +}; \ No newline at end of file