ADVERTISEMENT

Vertical Image Slider Using HTML,CSS & JavaScript

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

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

 

ADVERTISEMENT

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

 

ADVERTISEMENT

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

ADVERTISEMENT

 

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.

ADVERTISEMENT

Output 

ADVERTISEMENT

 

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

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

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

 

Live Preview Of Vertical Slider Using JavaScript

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Thank You And Keep Learning!!!

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

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.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

Yes!

ADVERTISEMENT

Telegram Group Join Now

Share on:

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

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT