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;
+}