Foro sobre hojas de estilo CSS
slide responsive con css
Volver al foro |
Responder |
Añadir nuevo tema
De: barontruenFecha: 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: barontruenUtil 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!
