Vertical Image Slider Using HTML, CSS and javaScript

Hello Readers, In this article you are going to learn how to create an image slider using HTML, CSS, and JavaScript programming code. This type of slide is used on the homepage or image gallery of various websites. Basically, a web developer uses jQuery or different types of plugins to create these.

You easily create a Vertical image slider with HTML, CSS, and JavaScript only without any jQuery or plugin then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS, and JavaScript then you can understand the following programming codes. It is designed in a completely modern way.

Some information about this Vertical Image Slider

If you can watch the live demo then you will understand how this slider works. In this case, I used four images and used a text box with background color between this slider. In this case, I have used two buttons to change the images. I used JavaScript programming code to activate these buttons. Below Provide Images link to download.

Watch the video tutorial to create Vertical Image Slider

If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Slider step by step completely beautifully. So you can learn how to make this Image Slider. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.

Hopefully, the above video tutorial has helped you to create this video Vertical Image Slider. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.

You might like this:

Vertical Image Slider | Source Codes

You have to create HTML CSS & Javascript File For this Site. After creating these files just paste the following codes into your file.

The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this Slider won’t appear. You’ve to download files from the given download button to use images also.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertical slider</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css">
    <!----Fontaesome CDN Link---->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>

  <div class="slider-container">
    <div class="left-slide">
      <div style="background-color: #fde">
        <h1>Pink Cherrish</h1>
        <p>to evlove into care</p>
      </div>
      <div style="background-color: rgb(254, 160, 0)">
        <h1>Yellow Luck</h1>
        <p>Shinning the clouds</p>
      </div>
      <div style="background-color: rgb(231, 58, 95)">
        <h1>Redness Lust</h1>
        <p>in the wilderness</p>
      </div>
      <div style="background-color: rgb(176, 136, 240)">
        <h1>Lavanda Love</h1>
        <p>in the sunset</p>
      </div>
    </div>
    <div class="right-slide">
      <div style="background-image: url('image/photo-1.jpg');"></div>
      <div style="background-image: url('image/photo-2.jpg');"></div>
      <div style="background-image: url('image/photo-3.jpg');"></div>
      <div style="background-image: url('image/photo-4.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>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="js.js"></script>
</body>
</html>

Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Lato', 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;
}
.action-buttons button{
	position: absolute;
	left: 35%;
	top: 50%;
	z-index: 100;
}
.action-buttons .down-button{
	transform: translateX(-100%);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.action-buttons .up-button{
	transform: translateY(-100%);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

third Step, you have to create a JS file with the name of js.js and paste the given codes in your JS file. Remember, you’ve to create a file with .js extension.

Javascript CODE:

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

now you’ve successfully created this Image Slider using HTML, CSS, and JS. If your code does not work or facing any error/problem to comment down or contact us through the contact page.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Categories