Как мне заставить эту бесконечную карусель работать? ⇐ CSS

[Anonymous]

У меня есть карусель, для которой требуется простая операция: казаться бесконечной. Проблема в том, что анимация обрезается и оставляет пустое место в конце последнего элемента. Я оставляю код ниже и надеюсь, что кто-нибудь сможет мне помочь.


< pre class="snippet-code-css lang-css Prettyprint-override">

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

.slider {
padding-top: 28px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
overflow: hidden;
}

.slider-items {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
animation: scroll 30s linear infinite;
}

@keyframes scroll {

0% {
transform: translateX(0%);
}

100% {
transform: translateX(-50%);
}
}

.slider-items img {
width: 12%;
margin: 40px;
filter: grayscale(100%);
}

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

[img]https://picsum.photos/id/237/200/300[/img]
[img]https://picsum.photos/seed/picsum/200/300[/img]
[img]https://picsum.photos/200/300?grayscale[/img]
[img]https://picsum.photos/200/300/?blur[/img]
[img]https://picsum.photos/200/300.jpg[/img]
[img]https://picsum.photos/id/237/200/300[/img]
[img]https://picsum.photos/seed/picsum/200/300[/img]
[img]https://picsum.photos/200/300?grayscale[/img]
[img]https://picsum.photos/seed/picsum/200/300[/img]
[img]https://picsum.photos/200/300?grayscale[/img]
[img]https://picsum.photos/200/300.jpg[/img]
[img]https://picsum.photos/id/237/200/300[/img]

Я попробовал клонировать контент, используя sass, изменив время, в течение которого длится анимация. , ширина всех контейнеров, изменение структуры HTML и ничего у меня не работает.

Подробнее здесь: https://stackoverflow.com/questions/782 ... ousel-work