in js I have an object containing 3 images

HTMLCollection(3) [img.lineup-image-1.images, img.lineup-image-2.images, img.lineup-image-3.images]

and an anchor tag with an onclick function that is supposed to work as a "next" button in a slideshow.

function next(){
    for (i = 0; i < slides.length; i++) {

        if (i == slides.length - 1) {
          console.log(i);
          slides[0].style.zIndex = "20";
          slides[i].style.zIndex = "10";
        }
      }

      for (i = 0; i < slides.length; i++) {
          if (i !== slides.length - 1) {
            slides[i].style.zIndex = "10";
            slides[i + 1].style.zIndex = "20";
            console.log("rokoko");
          }

          }
      }

Logic I'm trying to write :

3 images are position absolutely on top of each other with the last one showing on top.

First all elements in the object are assigned z-index of 10. After that I assign the last element z-index of 20.

If the button is clicked and the current slide is the last indexed in the object -> change current slide's z-index to 10 and change the first image's z-index to 20.

Else --> give the current slide z-index of 10 and give the next slide z-index of 20.

I feel like I'm getting lost in the nuances of how for loop works, I know where the problem is (first for loop checks for the last object and when true changes the z-indexes, but the second loop goes through the object items right after that and changes z-indexes at once), but how to build it so that the program can also check if the "current image" is not the last and also change the z-indexes accordingly? Thanks