Double Vertical Slider |  Image Gallery with Vertical Slider - codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a  Double Vertical Slider. We use HTML, and javascript for this  Double Vertical Slider. Hope you enjoy our blog so let's start with a basic HTML structure for a  Double Vertical Slider. 

add font awesome in Html

 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css  

HTML code for Vertical Slider

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

There is all HTML code for the Double Vertical Slider. Now, you can see output without CSS, then we write css & javascript for the  Double Vertical Slider.

output

CSS Code for  Double 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 section,  Here is our updated output CSS.

output 

Now add javascript for click arrow button & functionality for slide images.

Javascript code for Double 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"));  

Final output

Now we have completed our javascript section,  Here is our updated output with javascript. Hope you like the  Double Vertical Slider. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

Check out more.....

What is Html table tag? | Create a Basic HTML Table?

Learn CSS flexbox | What is flexbox in CSS? css flexbox

How to Create a Footer using Html & CSS? | Code With Random

How to create Instagram Logo Using HTML CSS? | Code With Random

What is a CDN? | How to add CDN links to the website?

How to create an HTML form? | How to style an HTML form - codewithrandom

In this post, we learn how to create a  Double Vertical Slider form using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki