slideshow with fullscreen support

fullscreen-slides.html

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