How To Make Image SlideShow Using Javascript, Html And Css Tutorial
Enter subtitle here
https://www.youtube.com/watch?v=f-nUv4HPS8Q
How To Make Image SlideShow Using Javascript, Html And Css Tutorial
Html Source Code
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="fontawesome/css/font-awesome.css"/>
<script src="javakl.js"></script>
</head>
<body>
<div>
<p></p>
<div>
<img src="images/Chrysanthemum.jpg" height="400px" width="900px" />
<div>
<a href="#" onclick="startslide(1)" > > </a>
<img src="images/next.png" onclick="startslide(1)" height="70px" width="70px"\/>
<img src="images/previous.png" onclick="startslide(-1)" height="70px" width="70px"/>
</div>
<div>
<p>caption</p>
</div>
</div>
</div>
</body>
</html>
Javascript Source Code
var images = [
"images/Chrysanthemum.jpg",
"images/Desert.jpg",
"images/Hydrangeas.jpg",
"images/Jellyfish.jpg",
"images/Koala.jpg"
];
var caption = [
"caption 1",
"caption 2",
"caption 3",
"caption 4",
"caption 5"
];
var imagePos = 0;
var imagesLenth = images.length - 1;
function startslide(x){
imagePos += x;
if(imagePos > imagesLenth) {
imagePos =0;
}
if(imagePos < 0) {
imagePos = imagesLenth;
}
document.getElementById('imagethmb').src = images[imagePos];
document.getElementById('cap').innerHTML = caption[imagePos];
}
setInterval(function startslide(){
imagePos ++;
if(imagePos > imagesLenth) {
imagePos =0;
}
if(imagePos < 0) {
imagePos = imagesLenth;
}
document.getElementById('imagethmb').src = images[imagePos];
document.getElementById('cap').innerHTML = caption[imagePos];
},1000);
Css
Source Code
*{
padding: 0px;
margin: 0px;
}
#container {
width:900px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#sliderdiv {
height: 400px;
width: 100%;
position:relative;
}
#left {
height:80px;
width:80px;
}
#buttons {
height:100px;
width:100%;
position:absolute;
top:28%;
}
.next {
float:right;
line-height:100px;
}
.previous {
float:left;
vertical-align:center;
}
#caption {
height:100px;
width:100%;
background-color:black;
position:absolute;
opacity:0.5;
bottom:0;
color:white;
}