Skip to content

Instantly share code, notes, and snippets.

@fabricekabongo

fabricekabongo/easygallery.html

Last active November 16, 2015 11:03
Show Gist options
  • Save fabricekabongo/ce765199cce35b0dad14 to your computer and use it in GitHub Desktop.
Save fabricekabongo/ce765199cce35b0dad14 to your computer and use it in GitHub Desktop.
Download ZIP
small gallery
Raw
easygallery.html
<!Doctype html>
<html>
<head>
<title>Easy Gallery by Fabrice Kabongo</title>
</head>
<body>
<div class="carousel-item" style="display: block">
<img src="http://lorempixel.com/200/200/sports" width="100" />
</div>
<div class="carousel-item" style="display: none">
<img src="http://lorempixel.com/200/200/nature" width="100" />
</div>
<div class="carousel-item" style="display: none">
<img src="http://lorempixel.com/200/200/food" width="100" />
</div>
<div class="carousel-item" style="display: none">
<img src="http://lorempixel.com/200/200/nightlife" width="100" />
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
<script type="text\javascript">
var divs = document.getElementsByClassName('carousel-item');
var btnPrev = document.getElementsByClassName('prev')[0];
var btnNext = document.getElementsByClassName('.next')[0];
var currentDiv = 0;
var len = 0;
btnPrev.addEventListener('click', function (event) {
divs[currentDiv].style.display = "none";
if (currentDiv == 0 ) {
len = divs.length;
currentDiv = (len == 0)? len : len-1;
} else {
currentDiv--;
}
divs[currentDiv].style.display = "block";
});
btnNext.addEventListener('click', function (event) {
divs[currentDiv].style.display = "none";
len = divs.length;
len = (len == 0)? len : len-1;
if (currentDiv == len) {
currentDiv = 0;
} else {
currentDiv++;
}
divs[currentDiv].style.display = "block";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment