I have a horizontal carrousel that im trying to make infinitely scrolling on both directions using the intersection observer api (There are several elements that are visible at once).

However when I add slides, the carrousel expands to the right visually shifting all the elements as well. (With the intersection observer it creates this loop as well, so I hope there is a way to expand the div to the left instead.)

• I need it to stop shifting all the elements already in the div, is there a way to only shift the new elements?/expand the carrousel to the left direction instead of right?

This is currently how the slides are added to the left:

hmtl
<div class="parentCaros"> <!-- Its so nested, because there will be more than one carrousel-->
    <div class="parentCont">
        <div class="parent">
            <li class="child"></li>
            <li class="child"></li>
            <li class="child"></li>
            <li class="child"></li>
            <li class="child"></li>
            <li class="child"></li>
         </div>
    </div>
</div>`

CSS
.parentCaro{
    width: 100vw;
    height: 30rem;
    display: flex;
    flex-direction: column; /* for the other carousels*/
    justify-content: center;
}

.parent{
    width: fit-content;
    justify-content: center; /* Incase there are less items than the */
    gap: 5rem;
    height: 10rem;
}

li{
    list-style: none;
    border: solid 1px green;
    width:10rem;
    height: 5rem;
}


JS

//________________The observer I made if its relevant_______________
const observaa = new IntersectionObserver(entries => {
      entries.forEach(entry=>{
          entry.target.classList.toggle("up", entry.isIntersecting);
      })
  },
  { 
    rootMargin: "20% -10% 20% -10%",
  });


// _______________________________THIS IS WHERE THE ISSUE ACTUALLY STARTS____________________
let caroBack = document.querySelector("parent");
function loadSlidesA(){
      let u = caroBack.children.length-1
      for (let i = 0; i < 5; i++) {
        const cardBefore = caroBack.children[u].cloneNode(true);
        u--;
        cardBefore.classList.add("up")
        observaa.observe(cardBefore);
        caroBack.insertBefore(cardBefore, caroBack.children[0]) //!!! HI THIS IS WHERE I APPEND
      }
    }

So when I use .insertBefore(), it automatically shifts my items to the right. I hoped there would be a way to append items to an array, without visually shifting items to the right, which subsequently expands the div rightwards.