Zaloguj | Zarejestruj | FAQ
Anonymous

slide responsive con css

+ Odpowiedz

Posty: 4 Strona 1 z 1


slide responsive con css

przez barontruen » Pt cze 12, 2015 10:23 am

Esta casi terminado pero le falta un empujon:



<!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>
</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>
Avatar użytkownika

barontruen

  • Posty: 2
  • Dołączył(a): Pt cze 12, 2015 10:20 am

Re: slide responsive con css

przez XainPro » Pt cze 12, 2015 1:31 pm

¿cuál es el problema exactamente?
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: slide responsive con css

przez barontruen » Pn cze 15, 2015 9:45 am

Ya lo he solucionado.
Ha costado un poco pero es relativamente sencillo.
La solución en:
www.casasalameda.com
Avatar użytkownika

barontruen

  • Posty: 2
  • Dołączył(a): Pt cze 12, 2015 10:20 am

Re: slide responsive con css

przez XainPro » So sie 01, 2015 7:28 pm

buena suerte
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1