How to make a image slider using HTML CSS and JavaScript
The HTML code is here:-
<!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">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d2f9ebebd7.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="main">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" alt="nature" />
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="snow" />
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" alt="mountain" />
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" alt="woods" />
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" alt="5terre" />
<span onclick="next(-1)"><i class="fas fa-angle-left"></i></span>
<span onclick="next(1)"id="next"><i class="fas fa-angle-right"></i></span>
<h1 id ="imgname"></h1>
<span id="number">1</span>
<div class="show">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
The Css code is here:-
.main {
width: 100%;
height: 200px;
box-shadow: 0px 0px 3px,
0px 0px 6px,0px 0px 9px;
position: relative;
border-radius: 3px;
}
.main img {
width: 100%;
display: none;
height:200px;
}
span{
padding:10px 10px;
color: white;
position: absolute;
top:40%;
}
span:hover{
background:rgba(0,0,0,0.5)
}
#next{
right: 0px;
}
#imgname{
position: absolute;
bottom:-23px;
width: 100%;
background:rgba(0,0,0,0.3);
text-align: center;
color:white;
padding:5px 0px;
}
i{
font-size:40px;
}
#number{
top: 5px;
}
.show{
display: flex;
justify-content: center;
}
.show button{
height: 20px;
width:20px;
border-radius:50%;
border:1px solid #ccc;
margin-top:10px;
margin-left: 5px;
box-shadow: inset 2px -1px 1px 0 rgba(255, 255, 255, .2),
inset -3px 2px 5px 0 rgba(0, 0, 0, .2),
3px 1px 1px 0 rgba(0, 0, 0, .5),
-1px -1px 1px 0 rgba(0, 0, 0, .5),
3px -1px 1px 0 rgba(0, 0, 0, .5),
-1px -1px 5px 0 rgba(0, 0, 0, .5),
4px 0 1px 0 rgba(255, 255, 255, .3);
transform: translate(1px, -1px);
}
The JavaScript code is here :-
var indi =1;
var flag = 0;
function next(add){
flag = flag + add;
free(flag);
indi = indi +add;
report(indi);
}
report(indi);
function report(numb) {
if (indi > 5) {
numb = 1;
indi = 1;
}
if (indi < 0) {
numb = 5;
indi = 5;
}
document.getElementById('number').innerHTML = numb+'/5';
}
free(flag);
function free(num){
var h1 =document.getElementById('imgname');
var img = document.querySelectorAll('.main img');
for(let y of img){
y.style.display = 'none';
}
if(num>img.length-1){
num = 0;
flag = 0;
}
if (num<0){
num =img.length -1;
flag = img.length-1;
}
img[num].style.display = 'block';
h1.innerHTML = img[num].alt;
var button = document.querySelectorAll('button');
for(let x of button){
x.style.backgroundColor ='white';
}
button[num].style.backgroundColor ='dimgray';
}
Nice Information
ReplyDeleteAnd Nicely done