.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 1em;
}

.slides {
  display: flex;
  width: 100%;
  animation: slide 24s infinite;
}

.slides img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

@keyframes slide {

  /* 1 */
  0%   { transform: translateX(0); }
  10%  { transform: translateX(0); }

  /* 2 */
  12%  { transform: translateX(-100%); }
  22%  { transform: translateX(-100%); }

  /* 3 */
  24%  { transform: translateX(-200%); }
  34%  { transform: translateX(-200%); }

  /* 4 */
  36%  { transform: translateX(-300%); }
  46%  { transform: translateX(-300%); }

  /* 5 */
  48%  { transform: translateX(-400%); }
  58%  { transform: translateX(-400%); }

  /* 4 */
  60%  { transform: translateX(-300%); }
  70%  { transform: translateX(-300%); }

  /* 3 */
  72%  { transform: translateX(-200%); }
  82%  { transform: translateX(-200%); }

  /* 2 */
  84%  { transform: translateX(-100%); }
  94%  { transform: translateX(-100%); }

  /* 1 */
  96%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}