window.addEventListener('load', init); let slides; let currentSlide; function init() { slides = Array.from(document.querySelectorAll('article')); for (let i = 0; i < slides.length; i++) { slides[i].id = `slide${i}`; } goToSlide(0); document.addEventListener('keydown', onKeyPressed); } function goToSlide(index) { if (index >= 0 && index < slides.length) { currentSlide = index; window.location.href = window.location.href.split('#')[0] + `#slide${index}`; } } function goToPreviousSlide() { goToSlide(currentSlide - 1); } function goToNextSlide() { goToSlide(currentSlide + 1); } function goToFirstSlide() { goToSlide(0); } function goToLastSlide() { goToSlide(slides.length - 1); } function onKeyPressed(event) { switch (event.keyCode) { case 34: // page down case 40: // arrow down case 39: // arrow right goToNextSlide(); break; case 33: // page up case 38: // arrow up case 37: // arrow left goToPreviousSlide(); break; case 36: // pos1 goToFirstSlide(); break; case 35: // end goToLastSlide(); break; } }