image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

slide responsive con css

Volver al foro | Responder | Añadir nuevo tema


De: barontruen
Fecha: 12/06/2015
Mensaje:

Me falta poco pero no funciona bien:

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Slider responsive solo con CSS</title>
<style type="text/css">

* {
margin : 0;
padding : 0;
border : 0;
vertical-align : baseline;
}
ul{
list-style:none;
}
/* CAROUSEL */
.carrusel{
float:left;
width:70%;
margin:1em;
overflow:hidden;
}
.carrusel ul{
position:relative;
float:left;
width:700%;
animation:slide 24s infinite ease;
}
.carrusel ul > li{
position:relative;
float:left;
width:14.28571429%;
}
.carrusel img{
display:block;
width:100%;
background-color:#333;
Box-sizing:border-box;
}
.thum{
float:left;
width:70%;
margin:1em;
overflow:hidden;
}
.thum ul{
width:100%;
height:100%;
}
.thum img{
display:block;
width:100%;
}
.thum li{
width:14.28571429%;
float:left;
}
.thum ul .marca img{
box-sizing:border-box;
position:relative;
float:left;
border:double magenta 4px;
animation:slide 24s infinite ease;
}
@keyframes slide{
0.00%{left:0.00%;}
12.50%{left:0.00%;}16.67%{left:-100.00%;}
29.17%{left:-100.00%;}33.33%{left:-200.00%;}
45.83%{left:-200.00%;}50.00%{left:-300.00%;}
62.50%{left:-300.00%;}66.67%{left:-400.00%;}
79.17%{left:-400.00%;}83.33%{left:-500.00%;}
95.83%{left:-500.00%;}99.999%{left:-600.00%;}
100%{left:0;}
}
</style>
</head>

<body>
<div class="thum">
<ul>
<li><img src="imagenes/oe01.jpg" alt="Modelo O"></li>
<li><img src="imagenes/fe01.jpg" alt="Modelo F"></li>
<li><img src="imagenes/qe01.jpg" alt="Modelo Q"></li>
<li><img src="imagenes/ke01.jpg" alt="Modelo K"></li>
<li><img src="imagenes/ve01.jpg" alt="Modelo V"></li>
<li><img src="imagenes/xye01.jpg" alt="Modelo XY"></li>
<li class="marca"><img src="imagenes/marcador.png" alt="Modelo F"></li>
<li class="sombra"><img src="imagenes/marcador.png" alt="Modelo F"></li>
</ul>
</div>
<div class="carrusel">
<ul>
<li><img src="imagenes/oe01.jpg" alt="Modelo O"></li>
<li><img src="imagenes/xye01.jpg" alt="Modelo XY"></li>
<li><img src="imagenes/ve01.jpg" alt="Modelo V"></li>
<li><img src="imagenes/ke01.jpg" alt="Modelo K"></li>
<li><img src="imagenes/qe01.jpg" alt="Modelo Q"></li>
<li><img src="imagenes/fe01.jpg" alt="Modelo F"></li>
<li><img src="imagenes/oe01.jpg" alt="Modelo O"></li>
</ul>
</div>

</body>
</html>



De: barontruen
Util para: 0 personas

Fecha: 15/06/2015
Mensaje:

Solucionado.
www.casasalameda.com



Volver al foro | Responder | Añadir nuevo tema


WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.