Why is the JS function not working?

Question

JavaScript

.then((value) => {
      const arrSlides = document.getElementsByClassName("slider__slide");

      // It count's index of arrSlides("slider__slide") per click ( we work with the array don't forget)
      let wrapperIndex = -1;

      // It count's index of div.img(value.length) per click  ( we work with the array don't forget)
      let valueIndex = -1;

      // click function. It's like a slider with lazy download because It's only change img src=URL and doesnt change the DOM
      const clickArrow = () => {
        // count + 1 per index of arrSlides erevery click
        wrapperIndex = wrapperIndex + 1;
        // count + 1 index of div.img per erevery click
        valueIndex = valueIndex + 1;


        // We have only 4 div.style.backgroundIMG = "URL"
        const checkDivLength = () => {
          if (wrapperIndex > slidesQuantity - 1) {
            return (wrapperIndex = 0);
          }
        };
        checkDivLength();

        // U can click more times than value.length. This function exclude this issue with empty slide and makes our slider infinity
        const checkValueLength = () => {
          if (valueIndex >= value.length) {
            return (valueIndex = 0);
          }
        };
        checkValueLength();

        const event = () => {
          arrSlides[wrapperIndex].style.backgroundImage =
            `url` +
            `${`(http://api.dev.cakeiteasy.no/api/store/images/${value[valueIndex]}/?size=small_url&compress_type=web)`}`;
        };
        event();
      };

      // It show's slides when user open web-page
      for (let index = 0; index < slidesQuantity; index++) {
        clickArrow();
      }

      const next = document
        .querySelector(".slider__arrow_next")
        .addEventListener("click", clickArrow);

      const arrowPrev = document
        .querySelector(".slider__arrow_prev")
        .addEventListener("click", clickArrow);
    });

There was an idea to create a slider. It seems to work, but not completely. Pictures are loaded via the API, a DIV-shell is immediately created for them. When you click on any arrow, images are loaded into the next DIV at the index. If DIV is greater than 4, but it resets to zero and the loop starts again. Here questions in the following,
How to make so that together with a click on an arrow the function accepting a variable ( - 1 ) is transferred. That would solve the rewind problem. Because at the moment everything goes only forward, and then it is reset.