Анимированный порядок flexbox для плавной и бесконечной прокрутки. ⇐ CSS

[Anonymous]

Я пытаюсь создать карусель с бесконечной прокруткой. Допустим, у него три элемента и HTML-код:

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

document.querySelectorAll('.buttons .button').forEach((button) => {
button.addEventListener('click', (event) => {
slide(event.target.getAttribute('data-direction'));
});
});

const slide = (direction) => {
const allSlides = document.querySelectorAll(
'.carousel-slides .carousel-slide'
);

if ('right' === direction) {
allSlides.forEach((el) => {
el.style.order--;

if (el.style.order < 1) {
el.style.order = allSlides.length;
}
});
} else if ('left' === direction) {
allSlides.forEach((el) => {
el.style.order++;

if (el.style.order > allSlides.length) {
el.style.order = 1;
}
});
}
};

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

.post-carousel {
margin           : 0 auto 40px;
outline          : 1px solid black;
width            : 640px;
}
.buttons {
display          : flex;
justify-content  : space-between;
width            : 620px;
margin           : auto;
}
.button {
background-color : #fff;
border           : 1px solid green;
z-index          : 2;
padding          : 4px;
width            : 45px;
}
.carousel-slides {
column-gap       : 10px;
display          : flex;
flex-flow        : row nowrap;
padding          : 10px 0;
margin           : 0 10px;
}
.carousel-slide {
background-color : lightgreen;
border-radius    : 16px;
outline          : 1px solid var(--RISD-Blue-Med-Light, #d6e2ff);
display          : flex;
flex-direction   : column;
flex             : 200px 0 0;
font-size        : 12px;
gap              : 16px;
height           : 50px;
justify-content  : flex-start;
max-width        : 280px;
outline          : 2px solid green;
padding          : 24px 0;
text-align       : center;
}
.carousel-slide.red {
background-color : red;
}
.carousel-slide.blue {
background-color : blue;
}

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

LEFT

RIGHT




ONE
TWO
THREE

Нажатие правой или левой кнопки меняет порядок элементов в flexbox и помещает последнее в первое (или первое в последнее).
Это работает, но моя проблема в том, что я хочу, чтобы переход был плавным, чтобы они хорошо прокручивались место, а не просто перепозиционирование. В идеале, когда 1-й становится последним (или наоборот), я бы хотел, чтобы он также прокручивался за край div (или на экране). Как бы я это сделал?

Подробнее здесь: https://stackoverflow.com/questions/786 ... ite-scroll