Hello readers, Today in this blog you’ll learn how to create an Image Slider HTML CSS & JavaScript. In the earlier blog, I have shared how to create an Automatic Image Slider in HTML CSS & JavaScript. Now it’s time to create image slider controls using JavaScript that slides images forward and backward.
Image slider typically shows one big image at a time with a little snippet of texts, each linked to a page. The images get automatically or manually forward, allowing you to click on whichever image piqued your interest to go to a linked page to read more.
Today in this blog, I’ll share codes on how to create an image slider. This image slider is based on JavaScript which means to slide these images forward and backward on button click is only possible with JavaScript. Those bottom five buttons are used to slide images forward and backward one by one. And that left side and right side toggle buttons are used to show the previous and next image.
If you’re feeling difficult to understand what I am saying then you can watch a full video tutorial on this slider (Image Slider HTML CSS & JavaScript).
Video Tutorial of Image Slider HTML & JavaScript
In the video, you have seen an awesome image slider. If you like this image slider and want to get source codes then you can easily copy the codes from the given copy boxes as well you can download the source code files. You can also create this type of image slider using HTML & CSS only but your CSS codes will be much longer than JavaScript codes.
If you’re a beginner and you have basic knowledge of HTML CSS & JavaScript then you can easily use this slider in your projects and websites. And you can also easily customize this slider according to your requirements.
You might like this:
Image Slider HTML & JavaScript [Source Codes]
To create this slider (Image Slider HTML CSS & JavaScript). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Image Slider HTML CSS & JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="content">
<div class="images">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
<div class="btm-slides">
<span onclick="btm_slide(1)"></span>
<span onclick="btm_slide(2)"></span>
<span onclick="btm_slide(3)"></span>
<span onclick="btm_slide(4)"></span>
<span onclick="btm_slide(5)"></span>
</div>
<div class="sliders left" onclick="side_slide(-1)">
<span class="fas fa-angle-left"></span>
</div>
<div class="sliders right" onclick="side_slide(1)">
<span class="fas fa-angle-right"></span>
</div>
</div>
<script>
var indexValue = 1;
showImg(indexValue);
function btm_slide(e){showImg(indexValue = e);}
function side_slide(e){showImg(indexValue += e);}
function showImg(e){
var i;
const img = document.querySelectorAll('img');
const slider = document.querySelectorAll('.btm-slides span');
if(e > img.length){indexValue = 1}
if(e < 1){indexValue = img.length}
for(i = 0; i < img.length; i++){
img[i].style.display = "none";
}
for(i = 0; i < slider.length; i++){
slider[i].style.background = "rgba(255,255,255,0.1)";
}
img[indexValue-1].style.display = "block";
slider[indexValue-1].style.background = "white";
}
</script>
</body>
</html>
Second, 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.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 100vh;
}
.content{
height: 400px;
width: 750px;
position: relative;
}
.content .images{
height: 100%;
width: 100%;
}
.content .images img{
height: 100%;
width: 100%;
}
.btm-slides{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.btm-slides span{
height: 15px;
width: 50px;
border: 2px solid white;
margin: 0 3px;
cursor: pointer;
}
.sliders{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
cursor: pointer;
border: 2px solid white;
background: rgba(255,255,255,0.1);
}
.sliders:hover{
background: rgba(255,255,255,0.2);
}
.right{
right: 0;
}
.sliders span{
line-height: 41px;
font-size: 35px;
color: white;
}
That’s all, now you’ve successfully created an Image Slider HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
