From c8020e869e4988812918e278d188a17f1da4ce3e Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Tue, 17 Nov 2020 11:06:54 -0500 Subject: [PATCH] Double vertical slider --- double-vertical-slider/index.html | 48 +++++++++++++++ double-vertical-slider/script.js | 31 ++++++++++ double-vertical-slider/style.css | 97 +++++++++++++++++++++++++++++++ 3 files changed, 176 insertions(+) create mode 100644 double-vertical-slider/index.html create mode 100644 double-vertical-slider/script.js create mode 100644 double-vertical-slider/style.css diff --git a/double-vertical-slider/index.html b/double-vertical-slider/index.html new file mode 100644 index 0000000..f7a229b --- /dev/null +++ b/double-vertical-slider/index.html @@ -0,0 +1,48 @@ + + + + + + + + Vertical Slider + + +
+
+
+

Nature flower

+

all in pink

+
+
+

Bluuue Sky

+

with it's mountains

+
+
+

Lonely castle

+

in the wilderness

+
+
+

Flying eagle

+

in the sunset

+
+
+
+
+
+
+
+
+
+ + +
+
+ + + + diff --git a/double-vertical-slider/script.js b/double-vertical-slider/script.js new file mode 100644 index 0000000..996730f --- /dev/null +++ b/double-vertical-slider/script.js @@ -0,0 +1,31 @@ +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 diff --git a/double-vertical-slider/style.css b/double-vertical-slider/style.css new file mode 100644 index 0000000..709c11d --- /dev/null +++ b/double-vertical-slider/style.css @@ -0,0 +1,97 @@ +@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; +}