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 |
ADVERTISEMENT
Hope you enjoy our blog so let’s start with a basic HTML Structure for a Vertical Image Slider.
ADVERTISEMENT
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
@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
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
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
ADVERTISEMENT
why my button cannot show