You are currently viewing 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

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

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

 

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

 

HTML Code For Vertical 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 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

 

 

CSS Code For Vertical 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 

 

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

Now we have completed our Vertical Slider. Here is our updated output with Html, CSS, and JavaScript. Hope you like the Vertical 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 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

This Post Has 0 Comments

Leave a Reply