buscando algun slide que pueda añadir manual con solo css

Started by Will Garcia, April 26, 2022, 10:50:29 PM

Previous topic - Next topic

Will Garcia

buenas noches estoy buscando un codigo donde pueda añadir al menos 6 imagenes como slide usando solo html y css


he encontrado muchos que solo permiten añadir 4 imagenes



CSS

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

.slider ul {
display: flex;
padding: 0;
width: 400%;

animation: cambio 20s infinite alternate linear;
}

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

.slider img {
width: 100%;
}

@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%;}
}


CODIGO HTML

<div class="slider">
<ul>
<li>
<a href="" target="_blank"><img src=""></a>
 </li>
<li>
 <a href="" target="_blank"><img src=""></a>
</li>
<li>
  <a href="" target="_blank"><img src=""></a>
</li>
<li>
  <a href="" target="_blank"><img src=""></a>
</li>

<li>
  <a href="" target="_blank"><img src=""></a>
</li>

<li>
  <a href="" target="_blank"><img src=""></a>
</li>

</ul>
</div>

No logro hacer que aparezcan mas imagenes

Dhayzon

puras matematicas jajaj, el tamaño de tu lista esta ligado al tamaño del hijo   y tus keyframes estan asociados al tamaño de tu ul y li  y todo esto en base al tamaño de imágenes que deseas. no es lo mismo  poner 2  a poner 6 

si tu ul  mide  400    cada li debería medir 400/ la cantidad de items que quieres

y a si sucesivamente con los keyframes


Advertisement: