Как добавить элемент div внутри родительского элемента карусели, не сдвигая при этом однородные элементы/элементы div вн ⇐ CSS

[Anonymous]

У меня есть горизонтальная карусель, которую я пытаюсь сделать бесконечно прокручиваемой в обоих направлениях, используя API наблюдателя пересечений (есть несколько элементов, которые видны одновременно).
Однако, когда я добавляю слайды, карусель расширяется вправо, визуально сдвигая и все элементы. (С помощью наблюдателя пересечений он также создает этот цикл, поэтому я надеюсь, что вместо этого есть способ расширить элемент div влево.)

• Мне это нужно чтобы прекратить сдвиг всех элементов, уже находящихся в элементе div, есть ли способ сдвинуть только новые элементы?/развернуть карусель влево, а не вправо?

Сейчас слайды добавляются слева следующим образом:

Код: Выделить всё

hmtl



[*]
[*]
[*]
[*]
[*]
[*]


`

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
}
}

Поэтому, когда я использую .insertBefore(), мои элементы автоматически сдвигаются вправо. Я надеялся, что появится способ добавлять элементы в массив без визуального смещения элементов вправо, что впоследствии расширяет элемент div вправо.

Подробнее здесь: https://stackoverflow.com/questions/792 ... out-visual