Создайте карусель изображения, используя только CSS ⇐ Html

[Anonymous]

Я создал следующий код в качестве анимации. Тем не менее, я хочу, чтобы это как карусель изображения, так что после того, как изображение 1 покидает экран, он появляется после изображения 3. < /P>
В настоящее время анимация просто начинается снова. < /P>
Как я могу получить эффект карусели? class = "Snippet-Code-Html Lang-Html PrettyPrint-Override">

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

AI Image Generator



.scrolling-images-wrapper {
overflow: hidden;
position: relative;
width: 100%;
height: 220px;
}

.scrolling-images {
display: flex;
animation: scroll 20s linear infinite;
}

.scrolling-images img {
width: 200px;
height: 200px;
margin-right: 16px;
}

@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100px * 5)); /* Number of images to show in one loop * image width */
}
}



@keyframes typing {
from { width: 0; }
to { width: 100%; }
}

@keyframes progress {
0% { width: 0; }
100% { width: 100%; }
}

@keyframes robot {
0% { left: 0; }
100% { left: calc(100% - 30px); }
}







[img]https://via.placeholder.com/200x200?text=Image1[/img]
[img]https://via.placeholder.com/200x200?text=Image2[/img]
[img]https://via.placeholder.com/200x200?text=Image3[/img]

Подробнее здесь: https://stackoverflow.com/questions/788 ... g-only-css