Vertical Split Image Slider using HTML, CSS & JavaScript

 




Hello developers, today in this blog, you'll learn to create a Vertical Split Image Slider using HTML, CSS & JavaScript.

Image slider or slideshow commonly shows one large image. The images get manually forward and backward or upward and downward, allowing you to click on the upward and downward buttons.

In this blog (Vertical Split Image Slider), there are four images but only a single image with its slide content will appear. There are two arrows showing upward and downward arrows. On clicking the arrow, the slider will split and the image with its respective text slider is made visible. These buttons slide these images one by one on a button click. By clicking on the button you can choose which image you want with its respective text. This onclick button function is performed by using JavaScript.

The source code of this Vertical Split Image Slider is given below, if you want the source code of this program, you can copy it. You can use this Vertical Split Image Slider with your creativity and can take this project to the next level.

Vertical Split Image Slider [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Vertical Split Slider || Learningrobo</title> </head> <body> <div class="container"> <div class="slider-container"> <div class="left-slide"> <div style="background-color: #800080"> <h1>Sparrow</h1> <p>Lorem ipsum dolor...</p> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <div style="background-color: #354f32"> <h1>Parrot</h1> <p>Lorem ipsum dolor...</p> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <div style="background-color: #6a2b05"> <h1>Music</h1> <p>Lorem ipsum dolor...</p> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <div style="background-color: #072f5f"> <h1>Light House</h1> <p>Lorem ipsum dolor...</p> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> <div class="right-slide"> <div style=" background-image: url('https://cdn.pixabay.com/photo/2015/08/27/19/19/lighthouse-911003__340.jpg'); " ></div> <div style=" background-image: url('https://cdn.pixabay.com/photo/2020/04/15/14/45/microphone-5046876__340.jpg'); " ></div> <div style=" background-image: url('https://cdn.pixabay.com/photo/2018/08/12/16/59/parrot-3601194__340.jpg'); " ></div> <div style=" background-image: url('https://cdn.pixabay.com/photo/2022/02/22/17/25/stork-7029266__340.jpg'); " ></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> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To form the page attractive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.


@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;
}
.credit{
    margin-top: 20px;
    text-align: center;
    color: #fff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.credit a{
    text-decoration: none;
    color:#fff;
    font-weight: bold;
} 
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


      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"));
We hope you would like this Vertical Split Image Slider using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Vertical Split Image Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome