How to Create Responsive Double Vertical Slider Using HTML CSS & JS

by

Hey, learner today In this blog post, We will be creating a Double Vertical Slider Using HTML CSS & JS In the past post, we have created many projects one of them is Creating A Password Generator Using Javascript. With Out wasting time Now it is time to create a Double Vertical Slider.

How to Create Double Vertical Slider Using HTML CSS & JS

This Double Vertical slider is Created by using HTML CSS3 And Javascript. The slider is divided into two parts Left and Right. There is two Button Up and Down. The left side of the slider displays text only and the right side displays image. On clicking on the arrow button the slider changes.

But the sliding effect is different. While sliding one side goes up and one side comes down. We have put images from the internet. You can add as many images as you want. It is a web developer beginner project. If you want such types of Projects flow us on Facebook, Instagram, and Pinterest. You can see the output in Below code pen. In code pen you can easily edit the project and copy the code.

Preview of Double Vertical Slider on Codepen

Codepen Link

You might like this

Double Vertical Slider Using HTML CSS & JavaScript [Source code]

For Creating a Double Vertical Slider Using HTML CSS & JavaScript. At first, you have to create three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS files to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css at last paste the Javascript code in Script.js that’s all after pasting the code.

At first, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<!--Codingthai.com--> 
<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" />
    <link rel="stylesheet" href="style.css" />
    <title>Vertical Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div class="left-slide">
        <div style="background-color: #FD3555">
          <h1>Nature flower</h1>
          <p>all in pink</p>
        </div>
        <div style="background-color: #2A86BA">
          <h1>Bluuue Sky</h1>
          <p>with it's mountains</p>
        </div>
        <div style="background-color: #252E33">
          <h1>Lonely castle</h1>
          <p>in the wilderness</p>
        </div>
        <div style="background-color: #FFB866">
          <h1>Flying eagle</h1>
          <p>in the sunset</p>
        </div>
      </div>
      <div class="right-slide">
        <div style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')"></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>

    <script src="script.js"></script>
  </body>
</html>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  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;
}

At last, you have to create a Javascript file with the named script.js and paste the Js code on it and save it again don’t forget to give the .js extension to the Javascript file.

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`

upButton.addEventListener('click', () => changeSlide('up'))
downButton.addEventListener('click', () => changeSlide('down'))

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)`
}

That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

Views: 380

Leave a Comment