Hello everyone, you can learn how to create an Image Slider using HTML, CSS & JavaScript in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Image Slider
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Image Slider</title>
</head>
<body>
<div class="container">
<div class="image">
<img src="images/img-1.jpg" alt="">
</div>
<div class="image">
<img src="images/img-2.jpg" alt="">
</div>
<div class="image">
<img src="images/img-3.jpg" alt="">
</div>
<div class="image">
<img src="images/img-4.jpg" alt="">
</div>
<div class="image">
<img src="images/img-5.jpg" alt="">
</div>
<div class="button">
<a onclick="nextimg(-1)" class="prev">❮</a>
<a onclick="nextimg(1)" class="next">❯</a>
</div>
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</div>
<script>
var imageno =1;
displayimg(imageno);
function nextimg(n){
displayimg(imageno += n)
}
function currentSlide(n){
displayimg(imageno = n)
}
function displayimg(n){
var i;
var image = document.getElementsByClassName("image");
var dots = document.getElementsByClassName("dot");
if(n > image.length){
imageno = 1;
}
if(n < 1){
imageno = image.length;
}
for(i=0; i < image.length; i++){
image[i].style.display = "none";
}
for(i=0; i < dots.length; i++){
dots[i].className = dots[i].className.replace(" active", "");
}
image[imageno - 1].style.display ="block";
dots[imageno - 1].className += " active";
}
</script>
</body>
</html>
Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #80ed99;
}
.container{
width: 80%;
height: 80vh;
margin: auto;
position: relative;
}
.container .image{
display: none;
}
.container .image img{
width: 100%;
height: 80vh;
object-fit: cover;
border-radius: 15px;
overflow: hidden;
}
.container .button{
position: absolute;
top: 50%;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
z-index: 5;
}
.container .button a{
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
vertical-align: middle;
align-items: center;
cursor: pointer;
color: white;
background: rgba(0, 0, 0, 0.8);
font-size: 20px;
user-select: none;
}
.container .button .prev{
border-radius: 0 5px 5px 0;
}
.container .button .next{
border-radius: 5px 0 0 5px;
}
.dots{
text-align: center;
position: absolute;
bottom: 8px;
left: 45%;
background: rgba(0, 0, 0, 0.8);
padding: 5px 10px;
height: 30px;
border-radius: 15px;
}
.dot{
cursor: pointer;
height: 20px;
width: 20px;
border-radius: 50%;
background: #bbb;
display: inline-block;
margin: 0 2px;
}
.active, .dot:hover{
background: yellow;
}That’s It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
For Download Code You have to wait 30 seconds.
