Verán el slider no me permite poner más de 4 imágenes sin que se rompa el poder ver solo de 1 en una las imágenes. creo que el problema está aquí en el .slider ul {width: 400%;}, he intentado variarlo pero no consigo hacer que respete la proporción, también he mirado en YT pero nada. Cualquier ayuda es bienvenida
<div class="slider">
<ul>
<li><img src="Deslizante1.jpg" alt=""> </li>
<li><img src="Deslizante2.jpg" alt=""></li>
<li><img src="Deslizante3.jpg" alt=""></li>
<li><img src="Deslizante4.jpg" alt=""></li>
<li><img src="Deslizante5.jpg" alt=""> </li>
</ul>
</div>
/*Galería deslizante*/
.slider {
width: 80%;
margin: auto;
overflow: hidden;
background-color: none;
}
.slider ul {
display: flex;
padding: 0;
width: 400%;
animation-name: cambio;
animation-direction: normal;
animation-duration: 10s;
animation-iteration-count: infinite linear;
}
.slider li {
width: 100%;
border: none;
}
.slider img {
width: 100%;
height: 500px;
}
@keyframes cambio {
0% {margin-left: 0;}
20% {margin-left: 0;}
25% {margin-left: -100%;}
45% {margin-left: -100%;}
50% {margin-left: -200%;}
70% {margin-left: -200%;}
75% {margin-left: -300%;}
100% {margin-left: -300%;}
}
<div class="slider"> <ul><li><img src="Deslizante1.jpg" alt=""> </li> <li><img src="Deslizante2.jpg" alt=""></li> <li><img src="Deslizante3.jpg" alt=""></li> <li><img src="Deslizante4.jpg" alt=""></li> <li><img src="Deslizante5.jpg" alt=""> </li></ul></div>
y respecto al JS no precisa de ningún JS el slider