Telegram Group Join Now

Vertical Image Slider Using HTML,CSS & JavaScript

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Vertical Image Slider. We use HTML, CSS, and JavaScript for this Vertical Slider With Images.

Code by	N/A
Project Download	Link Available Below
Language used	HTML, CSS and JavaScript
External link / Dependencies	Yes
Responsive	Yes

Vertical Slider With Image Gallery Table

Hope you enjoy our blog so let’s start with a basic HTML Structure for a Vertical Image Slider.

Vertical Slider With Image Gallery Using HTML,CSS & JavaScript — Vertical Slider With Image Gallery Using HTML, CSS & JavaScript

HTML Code For Vertical Image Slider

<!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>

There is all the Html code for the Vertical Image Slider. Now, you can see output without CSS and Javascript. then we write CSS for styling Vertical Slider and use javascript for the changing image with one click.

10+ Javascript Projects For Beginners With Source Code

Only Html Code Output

Vertical Image Slider Using HTML,CSS & JavaScript

CSS Code For Vertical Image Slider

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

Now we have completed our Css Code section. Here is our updated output With HTML + CSS.

Output

50+ Html, Css & Javascript Projects With Source Code

Now add javascript for click arrow button and image change functionality for slide images.

JavaScript Code For Vertical Image Slider

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"));

Restaurant Website Using HTML And CSS With Source Code

Final Output Of Vertical Slider Using JavaScript

Live Preview Of Vertical Slider Using JavaScript

<br /> See the Pen <a href="https://codepen.io/celebstori/pen/qBKPVWG" rel="nofollow noopener" target="_blank"><br /> Vertical Slider</a> by ankit (<a href="https://codepen.io/celebstori" rel="nofollow noopener" target="_blank">@celebstori</a>)<br /> on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br />

Now we have completed our Vertical Image Slider. Here is our updated output with Html, CSS, and JavaScript. Hope you like the Vertical Image Slider. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

In this post, we learn how to create a Vertical Image Slider Using Html, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Thank You And Keep Learning!!!

Written by – Code With Random/Anki

Which code editor do you use for this Vertical Slider With Image Gallery coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

Vertical Image Slider Using HTML,CSS & JavaScript

Telegram Group Join Now

Vertical Image Slider Using HTML,CSS & JavaScript

HTML Code For Vertical Image Slider

CSS Code For Vertical Image Slider

JavaScript Code For Vertical Image Slider

Final Output Of Vertical Slider Using JavaScript

Live Preview Of Vertical Slider Using JavaScript

Which code editor do you use for this Vertical Slider With Image Gallery coding?

is this project responsive or not?

Do you use any external links to create this project?

Telegram Group Join Now

0 thoughts on “Vertical Image Slider Using HTML,CSS & JavaScript”

Leave a Comment Cancel reply