I want to build something like this: https://jenniferlynnwagner.com/spanish360/story_html5.html (just for reference). I have images with content, now I want to display them on the screen and when the user clicks on next or previous button, able to do so. So how can I achieve this thing in my project using JavaScript and Spring boot (backend)?

Below is the script to handle current, next and previous slide.

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";
}