Published on: 23 June 2026
SUMMARY
.slideshow {
width: 460px;
height: 640px;
overflow: hidden;
}
.slides {
display: flex;
width: 100%;
height: 100%;
animation: slideshow 20s infinite;
}
.slides img {
min-width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slideshow {
0%, 16% {
transform: translateX(0);
}
20%, 36% {
transform: translateX(-100%);
}
40%, 56% {
transform: translateX(-200%);
}
60%, 76% {
transform: translateX(-300%);
}
80%, 96% {
transform: translateX(-400%);
}
100% {
transform: translateX(0);
}
}