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