link to this script and each your <section> tag becomes a separate slide.

simple-slides.js

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