Creating Image Slide Show By using HTML,CSS And JavaScript:
HTML:
______________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="fontawesome-free-5.11.2-web (1)\fontawesome-free-5.11.2-web\css\all.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Image Scroler</title>
</head>
<body>
<div class="main-container">
<img src="first.jpg" width="900px" height="550px" id="images">
<button id="button-left"><i class="fas fa-arrow-left left" style="font-size: 30px"></button>
<button id="button-right"><i class="fas fa-arrow-right" style="font-size: 30px;"></button>
</div>
<script>
var left=document.getElementById('button-left');
var right=document.getElementById('button-right');
var images=document.getElementById('images');
var image=["first.jpg","second.jpg","third.jpg","fourth.jpg","fifth.jpg","sixth.jpg"];
var index=0;
right.onclick=function(){
index++;
if(index<image.length){
images.src=image[index];
}
else{
index=-1;
}
}
left.onclick=function(){
index--;
if(index>=0){
images.src=image[index];
}
else{
index=image.length-1;
}
}
</script>
</body>
</html>
CSS:
______________________________________________________
body{
margin:0px;
padding: 0px;
background-color: #59596D;
}
.main-container{
height: 550px;
width: 900px;
margin: 18px auto;
border-style: solid;
border-color: #D9D9D9;
border-width: 10px;
border-radius: 5px;
}
#button-left{
position: absolute;
padding: 20px 22px 20px 22px;
border-radius: 50%;
border-style: solid;
background-color: #D9D9D9;
margin-top: 220px;
margin-left: -40px;
outline: none;
}
#button-right{
position: absolute;
padding: 20px 22px 20px 22px;
border-radius: 50%;
border-style: solid;
background-color: #D9D9D9;
margin-top: 220px;
margin-left: 840px;
outline: none;
}
#images{
position: absolute;
}
#button-left:hover{
border-style: solid;
border-color:#565656;
border-width: 3px;
}
#button-right:hover{
border-style: solid;
border-color:#565656;
border-width: 3px;
}
_________________________________________________________________________________
0 Comments