How to remove transition form last slide - Javascript

Can someone help me with this? I'm trying to remove this ugly transition from the last slide but I don't know how to do it. For example, if the counter comes to last picture I want the first picture to become the next one, but I only managed to make a spinning transition. Can someone please advise?

let rowItemContaner = document.querySelectorAll(".row-item");
let playRowSlider;

for (let i = 0; i < rowItemContaner.length; i++) {
  let rowContainerTransition = rowItemContaner[i].querySelectorAll(".row-pic");
  let rowSlides = 0;
  let rowMaxSlides = rowContainerTransition.length;

  let goToRowSlide = function (slide) {
    rowContainerTransition.forEach((container, index) => {
      container.style.transform = `translateX(${100 * (index - slide)}%)`;
    });
  };


  goToRowSlide();

  let nextRowSlide = function (slide) {
    if (rowSlides === rowMaxSlides - 1) {
      rowSlides = 0;
    } else {
      rowSlides++;
    }
    goToRowSlide(rowSlides);
  };

  const initRowSlidex = function () {
    goToRowSlide(0);
  };
  initRowSlidex();

  let repertRowSlides = () => {
    playRowSlider = setInterval(function () {
      nextRowSlide(rowSlides);
    }, 2000);
  };

  repertRowSlides();
}

.row { 
   display: grid;
   grid-template-columns: 24% 24% 24% 24%;
   justify-content: space-between;
}

.row-img {
  object-fit: contain;
/*   position: absolute; */
  box-shadow: none;
}

.row-item {
  position: relative;
  border: 2px solid var(--border-color-button);
  box-shadow: 0 0 5px rgb(0 0 0 / 84%);
  height: 280px;
  overflow: hidden;
}

.row-pic {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 1s ease-out;
}

.rov-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.row-link {
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
  top: 0;
  left: 0;
  /* background-color: rebeccapurple; */
}


.row-item > a {
  object-fit: contain;
  display: inline-block;
  height: auto;
}
.row-img-difrent {
  object-fit: contain;
}

<div class="row">
  <div class="row-item">
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
        <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
        <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>

    <p class="row-text">Šporeti električni test</p>
  </div>
  <div class="row-item">
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>

    <p class="row-text">Šporeti električni test</p>
  </div>
</div>

Thanks!

Solution

You have to clone de first slide and append it at the end and stop the transition for this one. So now you can't see the animation to the first slide and it starts the animation again

But for further changes i recommend the slick slider. Its a powerfull slider lib

let rowItemContaner = document.querySelectorAll(".row-item");
let playRowSlider;

for (let i = 0; i < rowItemContaner.length; i++) {
    rowItemContaner[i].lastChild.after(rowItemContaner[i].getElementsByClassName("row-pic")[0].cloneNode(true));
    rowItemContaner[i].lastChild.setAttribute('class', 'row-pic clone');

    let rowContainerTransition = rowItemContaner[i].querySelectorAll(".row-pic");
    let rowSlides = 0;
    let rowMaxSlides = rowContainerTransition.length;

    let goToRowSlide = function (slide) {
        rowContainerTransition.forEach((container, index) => {
            if ( slide === 0 ) {
                container.style.transition = "0s"
            } else {
                container.style.transition = "1s ease-out"
            }
            container.style.transform = `translateX(${100 * (index - slide)}%)`;
        });
    };


    goToRowSlide();

    let nextRowSlide = function (slide) {
        if (rowSlides === rowMaxSlides - 1) {
            rowSlides = 0;
        } else {
            rowSlides++;
        }
        goToRowSlide(rowSlides);
    };

    const initRowSlidex = function () {
        goToRowSlide(0);
    };
    initRowSlidex();

    let repertRowSlides = () => {
        playRowSlider = setInterval(function () {
            nextRowSlide(rowSlides);
        }, 2000);
    };

    repertRowSlides();
}

.row { 
   display: grid;
   grid-template-columns: 24% 24% 24% 24%;
   justify-content: space-between;
}

.row-img {
  object-fit: contain;
/*   position: absolute; */
  box-shadow: none;
}

.row-item {
  position: relative;
  border: 2px solid var(--border-color-button);
  box-shadow: 0 0 5px rgb(0 0 0 / 84%);
  height: 280px;
  overflow: hidden;
}

.row-pic {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 1s ease-out;
}

.rov-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.row-link {
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
  top: 0;
  left: 0;
  /* background-color: rebeccapurple; */
}


.row-item > a {
  object-fit: contain;
  display: inline-block;
  height: auto;
}
.row-img-difrent {
  object-fit: contain;
}

<div class="row">
    <div class="row-item">
        <div class="row-pic">
            <div class="rov-container">
                <img class="row-img" loading="lazy"
                    src="https://picsum.photos/id/237/600/400"
                    alt="" />
                <a class="row-link" href="index.html"></a>
            </div>
        </div>
        <div class="row-pic">
            <div class="rov-container">
                <img class="row-img" loading="lazy"
                    src="https://picsum.photos/id/238/600/400"
                    alt="" />
                <a class="row-link" href="index.html"></a>
            </div>
        </div>
        <div class="row-pic">
            <div class="rov-container">
                <img class="row-img" loading="lazy"
                    src="https://picsum.photos/id/239/600/400"
                    alt="" />
                <a class="row-link" href="index.html"></a>
            </div>
        </div>
        <div class="row-pic">
            <div class="rov-container">
                <img class="row-img" loading="lazy"
                    src="https://picsum.photos/id/240/600/400"
                    alt="" />
                <a class="row-link" href="index.html"></a>
            </div>
        </div>

    </div>
    
</div>