Simple Slideshow

January 12, 2024

I needed a simple slideshow to display images on a large-screen TV and I came across Simple Fullscreen Image Slideshow. It was exactly what I needed and the codes are just so simple. I loved it so much, I replaced all my Flickity slideshows with this one. Here’s an example. Although it works as webpage, my goal is to create a digital display slider. Here’s the entire page:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slideshow</title>
<style>
@keyframes fadey {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
body {
  font-family: Avenir, Arial, sans-serif;
  font-size: 0;
  background: #000;
}

body, figure {  margin: 0; padding: 0;}

figure#slideshow {
  width: 100%;
  margin: 0 auto;
  position: relative;
  /*border: 1px solid #000;*/
  cursor: pointer;
}
figure#slideshow img {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: auto;
  opacity: 0;
}
figure#slideshow img:first-child { position: relative; }

#container:fullscreen {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}
#container:-moz-full-screen figure, #container:-ms-full-screen figure, #container:-webkit-fullscreen figure, #container:fullscreen figure {
  width: 100%;
  margin: 0 auto;
  background: #000;
}
:-webkit-full-screen {
  width: 100%; height: 100%;
}
*:-moz-full-screen {
  background: #000;
}
*:-webkit-full-screen {
  background: #000;
}
</style>

<script>
function cancelFullScreen() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msCancelFullScreen) {
document.msCancelFullScreen();
}
link = document.getElementById("container");
link.removeAttribute("onclick");
link.setAttribute("onclick", "fullScreen(this)");
}

function fullScreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
link = document.getElementById("container");
link.removeAttribute("onclick");
link.setAttribute("onclick", "cancelFullScreen()");
}

window.onload = function() {
  imgs = document.getElementById('slideshow').children;
  interval = 8000;
  currentPic = 0;
  imgs[currentPic].style.webkitAnimation = 'fadey '+interval+'ms';
  imgs[currentPic].style.animation = 'fadey '+interval+'ms';
  var infiniteLoop = setInterval(function(){
imgs[currentPic].removeAttribute('style');
if ( currentPic == imgs.length - 1) { currentPic = 0; } else { currentPic++; }
imgs[currentPic].style.webkitAnimation = 'fadey '+interval+'ms';
imgs[currentPic].style.animation = 'fadey '+interval+'ms';
  }, interval);
}
</script>
</head>
<body>
<figure id="container" onclick="fullScreen(this)">
<figure id="slideshow">
<img loading="lazy" src="img/01.jpg" alt>
<img loading="lazy" src="img/02.jpg" alt>
<img loading="lazy" src="img/03.jpg" alt>
</figure>
</figure>
</body>
</html>