How do I use Javascript to loop or cycle through and array of images on one increment per click?

How do we attach an event listener to the image object? and get the image carousel to scroll backward? The demo video is attached along with the coding.

Dear Adobe

Lena's, Comments are correct and were the initial reply. Please fix what she is saying needs to be fixed so she gets all the credit she deserves.  Lena Thank you for all your help. You are a complete Rockstar.

Your approach is also a nice solution, but it's double-edged...

The advantage is that all images are preloaded, so there's no need to wait after clicks to advance, but without taking this large preloading into account, you'll have to wait before you can start interacting, especially if there are a lot of images!

The disadvantage is that if the user doesn't click on the button, the non displayed images will have been loaded for nothing.

But class permutation is elegant.

You already have a good reply as a solution but I'll throw this one into the mix just incase arrays like the following = const images = ['blah' , 'blah' , 'blah'] are a bit daunting to you.

You can still hard code the images into the html as you may usually do and then use css to hide them and javascript to create an array from them, just add your own images, instead of image_1.jpg, image_2.jpg etc:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Through Images</title>

<style>
.gallery {
width: 70%;
margin: 0 auto;
}
.largeImg {
display: grid;
grid-template-columns: 1fr;
}
.largeImg img {
max-width: 100%;
display: none;
}
.largeImg img.active {
display: block;
animation: fadeIn 1s forwards ease;
}
.swapImg {
display: block;
margin: 25px auto;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>


</head>
<body>
<div class="gallery">
<div class="largeImg">
<img src="image_1.jpg" alt="" class="active">
<img src="image_2.jpg" alt="">
<img src="image_3.jpg" alt="">
<img src="image_4.jpg" alt="">
<img src="image_5.jpg" alt="">
</div>
<button class="swapImg">Swap Image</button>
</div>

<script>
const images = document.querySelectorAll('.largeImg img');

const swapImg = document.querySelector('.swapImg')

let count = 0;
swapImg.addEventListener('click', () => {
count++;
images.forEach((img) => {
img.classList.remove('active')
})

if(count === images.length) {
count = 0;
}

images[count].classList.add('active');
})


</script>

</body>
</html>

Here is a basic of what I understood :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swap images</title>
</head>
<body>
    <button id="myButton">Swipe</button>
    <img id="myImg" src="" alt="Image">
    
    <script>
        // Here you create your array
        const images = [
            'a-one.jpg',
            'a-two.jpg',
            'a-three.jpg',
            // add all images that you want
        ];
        const bouton = document.getElementById('myButton');
        const image = document.getElementById('myImg');
        let index = 0; 
        // Instead of using a called function 
        // I used the new Javascript syntax
        bouton.addEventListener('click', () => {
            // you probably will have to adapt the image path 
            // I used the one that you use on the video
            image.src='img/' + images[index];
            index++;
            // If you want to restart, set the index to 0
            // once the array will be passed
            if (index >= images.length) {
                index = 0;
            }
        });
    </script>
</body>
</html>