Minimal html slideshow.

slides.md

<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 0

Section 1

Section 2

Section 3