Double Vertical Slider | Image Gallery with Vertical Slider - codewithrandom

Double Vertical Slider |  Image Gallery with Vertical Slider - codewithrandom

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
Double Vertical Slider |  Image Gallery with Vertical Slider - codewithrandom

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 
Double Vertical Slider |  Image Gallery with Vertical Slider - codewithrandom

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
Double Vertical Slider |  Image Gallery with Vertical Slider - codewithrandom


Double Vertical Slider |  Image Gallery with Vertical Slider - codewithrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope 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 🙏💕

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 

Post a Comment

Previous Post Next Post