Skip to content

Instantly share code, notes, and snippets.

@nitishk72

nitishk72/slideshow.html

Created January 29, 2018 13:54
Show Gist options
  • Save nitishk72/9b3e154ba552507f61c6816be6915414 to your computer and use it in GitHub Desktop.
Save nitishk72/9b3e154ba552507f61c6816be6915414 to your computer and use it in GitHub Desktop.
Download ZIP
This is simple slideshow JavaScript code
Raw
slideshow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body{
background: #efefef;
font-family: sans-serif;
}
.slider{
width: 600px;
height: 450px;
margin: 0 auto;
}
ul{
padding: 0;
}
li{
display: none;
list-style: none;
}
p{
text-align: center;
font-size: 24px;
}
input[type="button"]{
background: #405060;
color: #fff;
width: 48%;
font-size: 30px;
border: 0;
box-shadow: 0px 2px 4px rgba(139,139,139,0.5);
border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<div class="controler">
<input type="button" onclick="pre()" value="Previous">
<input type="button" onclick="next()" value="Next">
</div>
<ul id="list">
<li>
<img src="1.jpg" alt="">
<p>This is Caption 1</p>
</li>
<li>
<img src="2.jpg" alt="">
<p>This is Caption 2</p>
</li>
<li>
<img src="3.jpg" alt="">
<p>This is Caption 3</p>
</li>
<li>
<img src="4.jpg" alt="">
<p>This is Caption 4</p>
</li>
<li>
<img src="5.jpg" alt="">
<p>This is Caption 5</p>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
show();
var curImage = 0;
function show() {
var item = document.getElementById('list').children;
var itemCount = item.length;
item[0].style.display = "block";
}
function next() {
var item = document.getElementById('list').children;
var itemCount = item.length;
item[curImage].style.display = "none";
curImage = curImage + 1;
if(curImage == itemCount)
curImage = 0;
item[curImage].style.display = "block";
}
function pre() {
var item = document.getElementById('list').children;
var itemCount = item.length;
item[curImage].style.display = "none";
curImage = curImage - 1 ;
if(curImage == -1)
curImage = itemCount - 1;
item[curImage].style.display = "block";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment