.slider {

width: 450px;

max-width: 1200px;

margin: auto;

overflow: hidden;

}
.slides {
display: flex;

width: 600%;

animation: slider 24s infinite;
}

.slide {

width: 100%;

flex-shrink: 0;

}
.slide img {

width: 100%;

display: block;

}

@keyframes slider {

0%, 13% {

transform: translateX(0);

}

16%, 29% {

transform: translateX(-100%);

}

32%, 45% {

transform: translateX(-200%);

}
48%, 61% {

transform: translateX(-300%);

}

64%, 77% {

transform: translateX(-400%);

}

80%, 93% {

transform: translateX(-500%);

}

100% {

transform: translateX(0);

}

}