.slider {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.slider ul {
  display: flex;
  padding: 0;
  width: 1000%; /* 10 imágenes x 100% */
  animation: cambio 50s infinite alternate; /* 50s = 10 imágenes x 5s cada una */
}

.slider li {
  width: 100%;
  list-style: none;
}

.slider img,
.slider li img {
  width: 80%;
}

/* PAUSA AL PASAR EL MOUSE (Funciona en Desktop sin necesidad de JS) */
.slider:hover ul {
  animation-play-state: paused;
}

@keyframes cambio {
  /* Imagen 1 */
  0%, 8% { margin-left: 0; }
  /* Imagen 2 */
  10%, 18% { margin-left: -100%; }
  /* Imagen 3 */
  20%, 28% { margin-left: -200%; }
  /* Imagen 4 */
  30%, 38% { margin-left: -300%; }
  /* Imagen 5 */
  40%, 48% { margin-left: -400%; }
  /* Imagen 6 */
  50%, 58% { margin-left: -500%; }
  /* Imagen 7 */
  60%, 68% { margin-left: -600%; }
  /* Imagen 8 */
  70%, 78% { margin-left: -700%; }
  /* Imagen 9 */
  80%, 88% { margin-left: -800%; }
  /* Imagen 10 */
  90%, 100% { margin-left: -900%; }
}

/*///////////////////////////////////////////////MEDIA QUERY ////////////////////////////////*/
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

  .slider li img {
    width: 100%;
  }
  .slider img {
    width: 80%;
  }
}