HTML - slideshow muy rapido

   
Vista:

slideshow muy rapido

Publicado por walter (28 intervenciones) el 13/03/2015 13:43:58
hola. estoy haciendo esta muestra:
http://sonidosdistantes.com.ar/climb/


y necesitaba hacer que pase mas lento el slide. les copio el código que lo hace funcionar:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
.slider {
 
  padding: 0;
  margin: 0;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
 
 
}
 
.slider ul {
  width: 1000%;
  height: auto;
  position: relative;
  list-style: none;
  left: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  -moz-animation:slide-animation 25s infinite;
  -webkit-animation:slide-animation 25s infinite;
}
 
 
 
.slider li {
  width: 10%;
  list-style: none;
  float: left;
  margin: 0;
  padding: 0;
}
 
img {
  max-width: 100%;
 
}
 
 
@-webkit-keyframes slide-animation {
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
 
 
}
 
@-moz-keyframes slide-animation {
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
 
 
}

PD: el boton "consultar" luego lo corrijo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel

slideshow muy rapido

Publicado por Angel (101 intervenciones) el 14/03/2015 01:56:18
solo modifica estos amigo ;)
1
2
-moz-animation:slide-animation 25s infinite;
-webkit-animation:slide-animation 25s infinite;

en el caso de que quieras que cambie cada 1 min, cambia esto 25s por esto 60s y deberia de quedar asi:
1
-webkit-animation:slide-animation 60s infinite;
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

slideshow muy rapido

Publicado por walter (28 intervenciones) el 20/03/2015 16:28:49
muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar