How To Make Image SlideShow Using Javascript, Html And Css Tutorial

05 Apr

05Apr

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 style="text/javascript" src="javakl.js"></script>

</head>
<body>

<div id="container">

<p id="pic"></p>

<div id="sliderdiv">
<img src="images/Chrysanthemum.jpg" height="400px" width="900px" id="imagethmb"/>

<div id="buttons">
<a href="#" onclick="startslide(1)" > > </a>
<img src="images/next.png" onclick="startslide(1)" height="70px" width="70px" class="next"\/>
<img src="images/previous.png" onclick="startslide(-1)" height="70px" width="70px" class="previous"/>
</div>

<div id="caption">
<p id="cap">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;
}

Videi link - https://www.youtube.com/watch?v=f-nUv4HPS8Q

How To Make Image SlideShow Using Javascript Html And Css Tutorial

Comments