Smooth Carousel Not Looping Properly – Jumps After Last Image

I’m working on creating a smooth carousel, but I’m running into an issue. After the last image is displayed, the website background shows up before it jumps back to the first image. I want the transition to be seamless, with the carousel smoothly looping back to the start without any gaps or jumps.

Thank you!

<div class="image-container">
    <div class="image-wrapper">
      <img class="bg" src="./pics/badger1.png" alt="bg">
      <img class="bg" src="./pics/badger2.png" alt="bg2">
      <img class="bg" src="./pics/badger3.png" alt="bg3">
      <img class="bg" src="./pics/badger4.png" alt="bg">
      <img class="bg" src="./pics/badger5.png" alt="bg">
      <img class="bg" src="./pics/badger6.png" alt="bg">
      <img class="bg" src="./pics/badger7.png" alt="bg">
      <img class="bg" src="./pics/badger8.png" alt="bg">
    </div>
  </div>

.image-container {
    overflow-x: hidden;
    max-width: 999px; /* Adjust the max-width as needed */
    margin-left: auto;
    margin-right: auto;
    padding-top: 1rem; /* Add padding to the top */
    padding-bottom: 1rem; /* Add padding to the bottom */
}

.image-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (0.5rem * (var(--per-view) - 1))) / var(--per-view)); /* Adjusted grid-gap */
    grid-gap: 0.5rem; /* Reduced gap between images */
    position: relative;
    left: 0;
    transition: .3s;
}

.image-wrapper > * {
    aspect-ratio: 4 / 3;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the entire image is visible without cutting off */
    display: block;
    border-radius: 1.5rem; /* Apply rounded corners to left and right sides only */
}

// IMAGE SLIDER
const imageWrapper = document.querySelector('.image-wrapper');
const imageItems = document.querySelectorAll('.image-wrapper > *');
const imageLength = imageItems.length;
const perView = 3;
let totalScroll = 0;
const delay = 2000;

imageWrapper.style.setProperty('--per-view', perView);

// Clone the first few images and append them to the end
for (let i = 0; i < perView; i++) {
    imageWrapper.appendChild(imageItems[i].cloneNode(true));
}

let autoScroll = setInterval(scrolling, delay);

function scrolling() {
    totalScroll++;
    const widthEl = document.querySelector('.image-wrapper > :first-child').offsetWidth + 24;
    imageWrapper.style.transition = '.3s';
    imageWrapper.style.left = `-${totalScroll * widthEl}px`;

    if (totalScroll === imageLength) {
        setTimeout(() => {
            imageWrapper.style.transition = '0s';
            imageWrapper.style.left = '0';
            totalScroll = 0;
        }, 300); // Match the transition duration
    }
}

Steps I tried

Checked for CSS Conflicts: Ensure there are no CSS styles that might be affecting the image-wrapper or its children, causing unexpected behavior.

Verify Image Dimensions: Ensure all images have consistent dimensions and there are no unexpected margins or paddings.