<!DOCTYPE html>
<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" />
        <title>Vertical Slider</title>
        <link rel="stylesheet" href="style.css" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        />
    </head>
    <body>
        <div class="slider-container">
            <div class="left-slide">
                <div style="background-color: #b99f8a">
                    <h1>Nature</h1>
                    <p>new collection</p>
                </div>
                <div style="background-color: #354f32">
                    <h1>Cars</h1>
                    <p>new collection</p>
                </div>
                <div style="background-color: #657e85">
                    <h1>Cars</h1>
                    <p>new collection</p>
                </div>
                <div style="background-color: #2b2e32">
                    <h1>Nature</h1>
                    <p>new collection</p>
                </div>
            </div>
            <div class="right-slide">
                <div
                    style="
                        background-image: url('https://source.unsplash.com/1600x900/?nature,water');
                    "
                ></div>
                <div
                    style="
                        background-image: url('https://source.unsplash.com/1600x900/?car,cars');
                    "
                ></div>
                <div
                    style="
                        background-image: url('https://source.unsplash.com/1600x900/?car,cars');
                    "
                ></div>
                <div
                    style=" background-image: url('https://source.unsplash.com/1600x900/?nature,water');); "
                ></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>
        <!-- JS -->
        <script src="app.js"></script>
    </body>
</html>

@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
* {
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;
}
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`;
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)`;
};
upButton.addEventListener("click", () => changeSlide("up"));
downButton.addEventListener("click", () => changeSlide("down"));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.