.slider {

  width: 600px;

  height: 400px;

  overflow: hidden;

  position: relative;

  margin: auto;

  border-radius: 10px;

}

.slides {

  display: flex;

  width: 300%; /* 100% x Number of Images */

  animation: slide 10s infinite;

}

.slides img {

  width: 100%;

  height: 400px;

  object-fit: cover;

}

@keyframes slide {

  0% { transform: translateX(0); }

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

  66% { transform: translateX(-200%); }

  100% { transform: translateX(0); }

}