Skip to content

Instantly share code, notes, and snippets.

@bddap
Created July 15, 2018 20:24
Show Gist options
  • Save bddap/e292dee788837ad103a2f4f63f3d9cc5 to your computer and use it in GitHub Desktop.
Save bddap/e292dee788837ad103a2f4f63f3d9cc5 to your computer and use it in GitHub Desktop.
slideshow with fullscreen support
<script>
let currentSlide = 0;
function display(slide) {
const sections = document.getElementsByTagName('section');
currentSlide = Math.min(Math.max(slide, 0), sections.length - 1);
Array.from(sections).forEach((section, index) => {
section.style.display = index === currentSlide ? null : 'none';
})
}
document.addEventListener('keydown', event => {
if(event.key === 'ArrowRight' || event.key == ' ') display(currentSlide + 1);
if(event.key === 'ArrowLeft') display(currentSlide - 1);
});
document.addEventListener("DOMContentLoaded", () => display(0));
</script>
<script>
// recommended css:
// body {width: 100vw; height: 100vh; margin:0;}
// html {background: white;}
function toggleFullScreen() {
if (document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullscreenElement ||
document.msFullscreenElement) {
(document.exitFullscreen ||
document.webkitExitFullscreen ||
document.mozCancelFullScreen ||
document.msExitFullscreen).bind(document)();
} else {
(document.body.requestFullscreen ||
document.body.webkitRequestFullscreen ||
document.body.mozRequestFullScreen ||
document.body.msRequestFullScreen).bind(document.body)();
}
}
document.addEventListener('keydown', event => {
if(event.key === 'f') toggleFullScreen();
})
</script>
<section>
Section 0
</section>
<section>
Section 1
</section>
<section>
Section 2
</section>
<section>
Section 3
</section>
<section>
<img src="https://picsum.photos/800/800" alt="random image" />
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment