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

Brainiac

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.

By @AmySykes

Add the below javascript directly before the closing </script> tag:

images.forEach(function(img) {
img.onclick = function() {
images.forEach((img) => {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})

AmySykesAuthor

Known Participant

It WORKS!!! Thank you so much.♥♥♥

AmySykesAuthor

Known Participant

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.

Community Expert

@osgood_ , you're preaching to the choir, the question isn't about that but about not marking comments as good answers when they are just comments.

Brainiac

@osgood_ , you're preaching to the choir, the question isn't about that but about not marking comments as good answers when they are just comments.

By @L e n a

Does that really matter that much....I mean the DW forum is hardly a place that attracts so much traffic that its going to be a huge concern? I'm sure anyone that runs across this thread can work it for themselves, if not, then they are probably already dead.........I would assume.

Community Expert

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.

Brainiac

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

By @L e n a

Yep, it's really aimed at those that have not yet progressed to a more advanced level of implementing a workflow using arrays which bring another dimension to the party. It might also be useful in terms of a limited amount of images being used in an auto rotating hero section. I'd consider having some kind of fade in effect on the images rather than just suddenly appearing, it adds a bit of a smoother result.

Brainiac

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>

AmySykesAuthor

Known Participant

Hi Osgood, Nice job. Very Well done. I like your solution and I appreciate all your help. Thank you!!

Community Expert

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>

AmySykesAuthor

Known Participant

Lena, You are a complete rock star!! Your solution is superb, easy to follow, and well thought out. Your coding is immaculate and very well commented which was super helpful. Thank you so much. I appreciate you.