Slider, por que el código solo muestra 4 imágenes¡

[fitojdj]

Hola todos, agradecer mucho se ayuda y les enviare 2 dlls en bitcoin a quien me ayude!!! hahah

tengo este codigo para slider, pero solo me muestra 4 imagenes y no veo donde limita eso :/

Código:

div#slider {
  overflow: hidden;
  margin: auto;
  width: 80%;
  max-width: 700px;
  max-height: 400px;
}
div#slider div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 7s slider infinite;
}
div#slider div img {
  width: 20%;
  float: left;
}
@keyframes slider {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
}

[ArturoGallegos]

Codigo completo por favor para poder emular el problema, igual puedes colcarlo en jsfiddle para mostrarlo en accion.

[fitojdj]

Código HTML:

<div id="slider">
<div>
            <img src="images/matrimonios/13.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/12.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/11.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/10.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/9.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/8.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/7.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/6.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/5.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/4.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/3.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/2.jpg" alt="">
        </div>
        <div>
            <img src="images/matrimonios/1.jpg" alt="">
        </div>
        
    </div> 

eso es lo que tengo integrado en my pagina y el dearriba es el css, aqui lo puedes ver funcionando http://rodolfodiaz.info/amistad/matrimonios.html

[pzin]

Lo que lo limita es esto:

Código CSS:

@keyframes slider {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
}
 

[fitojdj]

y como aumento el numero de imágenes?

[pzin]

Iniciado por fitojdj

y como aumento el numero de imágenes?

Pues lo primero es entender el código.

La animación en 0% se mantiene igual hasta el 20%, ahí se anima para mover el elemento a la izquierda hasta el 25%, donde se vuelve a parar hasta el 45%, ahí se vuelve a mover…
Aquí lo que tienes que hacer es reducir cada animación y calcular cuánto ocupa cada «parón» dependiendo de los elementos que vayas a necesitar.

Luego tal vez tengas que agrandar algún contenedor para que quepan los elementos que necesites.