Next/prev button for modal with Javascript

Question

I have been trying to make modal for a custom site I'm building. Everything seemed to go fine. It displayed whichever picture I clicked on and "previous" button works as intended. However, there seems to be a problem with "next" button because it behaves differently depending on which picture I'm currently on. Sometimes it jumps by few indexes forward or even backwards. Some insight would be appreciated. Thanks in advance. Here is a code HTML:

<div id="modalcontainer" class="displaynone">
    <h4>
        <span id="close">X</span>
    </h4>
    <img src="" alt="" id="modalcontent">
    <div class="buttoncontainer">
        <div class="previous">
            <span id="prev">&lt;</span>
        </div>
        <div class="next">
            <span id="next">&gt;</span>
        </div>
    </div>
</div>
<div id="imgcontainer">
    <img src="images/1.JPG" alt="">
    <img src="images/2.JPG" alt="">
    <img src="images/3.JPG" alt="">
    <img src="images/4.JPG" alt="">
    <img src="images/8.png" alt="">
    <img src="images/9.jpg" alt="">
    <img src="images/10.jpg" alt="">
</div>

And JS:

const modalContainer = document.getElementById("modalcontainer");
const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");
const closeModal = document.getElementById("close");
const modalContent = document.getElementById("modalcontent");
const imgContainer = document.getElementById("imgcontainer");
let containerImages = imgContainer.querySelectorAll("img");
let imgIndex = 0;



containerImages.forEach(function(img){
    img.setAttribute("data-index", imgIndex++);
    img.addEventListener("click", () => {
        if(modalContainer.classList.contains("displaynone")){
            modalContainer.classList.remove("displaynone");
            modalContainer.classList.add("displaymodal");
            modalContent.src = img.src;
           
        };
            imgIndex = img.dataset.index;
            console.log(imgIndex);
    });
});

closeModal.addEventListener("click", () => {
    if(modalContainer.classList.contains("displaymodal")){
        modalContainer.classList.remove("displaymodal");
        modalContainer.classList.add("displaynone");
    }
    imgIndex = 0;
});

nextButton.addEventListener("click", () => {
    imgIndex = (imgIndex += 1) % containerImages.length;
    modalContent.src = containerImages[imgIndex].src;
    console.log(imgIndex);
});

prevButton.addEventListener("click", () => {
    imgIndex = (imgIndex -= 1);
    if (imgIndex < 0) {
    imgIndex = containerImages.length - 1;
    console.log(imgIndex);
    };
    modalContent.src = containerImages[imgIndex].src;
    console.log(imgIndex);
});

Answer 1

I dummied up some objects to get it to run and your previous/next button code seems to work. It there some other code that might be involved? Something modifying the number of images in the imageContainer?

 const prevButton = document.querySelector("#prev"); const nextButton = document.querySelector("#next"); let images = document.querySelectorAll("img"); let imgIndex = 0; images.forEach((img) => img.addEventListener("click", () => { imgIndex = parseInt(img.dataset.index); setSelected(); }) ); setSelected(); prevButton.addEventListener("click", () => { imgIndex = imgIndex -= 1; if (imgIndex < 0) imgIndex = images.length - 1; setSelected(); }); nextButton.addEventListener("click", () => { imgIndex = (imgIndex += 1) % images.length; setSelected(); }); function setSelected() { images.forEach((img) => img.classList.remove("selected")); images[imgIndex].classList.add("selected"); }

 img { display: inline-block; border: 2px solid transparent; }.selected { border: 2px solid red; }

 <div id="imageContainer"> <img src="https://picsum.photos/100?random=1" data-index="0"> <img src="https://picsum.photos/100?random=2" data-index="1"> <img src="https://picsum.photos/100?random=3" data-index="2"> <img src="https://picsum.photos/100?random=4" data-index="3"> </div> <div> <button id="prev">Prev</button> <button id="next">Next</button> </div>