Quiero construir algo como esto: https://jenniferlynnwagner.com/spanish360/story_html5.html (solo como referencia). Tengo imágenes con contenido, ahora quiero mostrarlas en la pantalla y cuando el usuario haga clic en el botón siguiente o anterior, pueda hacerlo. Entonces, ¿cómo puedo lograr esto en mi proyecto usando JavaScript y Spring boot (backend)?

A continuación se muestra el script para manejar la diapositiva actual, siguiente y anterior.

 window.addEventListener('DOMContentLoaded', event => { // Toggle the side navigation const sidebarToggle = document.body.querySelector('#sidebarToggle'); if (sidebarToggle) { // Uncomment Below to persist sidebar toggle between refreshes // if (localStorage.getItem('sb|sidebar-toggle') === 'true') { // document.body.classList.toggle('sb-sidenav-toggled'); // } sidebarToggle.addEventListener('click', event => { event.preventDefault(); document.body.classList.toggle('sb-sidenav-toggled'); localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled')); }); } }); var slide_index = 1; displaySlides(slide_index); //chapter1-image 1-182 //chapter 2-image-1-127 //chapter 3-image 1-56 //chapter 4-image 1-42 //chapter 5-image 1-67 function nextSlide(n) { document.getElementById("slide-img").src="img/slider-2.jpg" playAudio(slide_index); } function playAudio(number) { var audioElement = document.getElementById("my_audio"); audioElement.pause(); audioElement.currentTime = 0; audioElement.src = "audio/" + number + ".mp3"; audioElement.load(); audioElement.play(); } function currentSlide(n) { displaySlides(slide_index = n); } function displaySlides(n) { var i; var slides = document.getElementsByClassName("showSlide"); if (n > slides.length) { slide_index = 1 } if (n < 1) { slide_index = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slide_index - 1].style.display = "block"; }