No funcionan los botones del slider
Publicado por JetLagFox (8 intervenciones) el 28/11/2016 01:41:36
Buenas,
Quiero realizar un slider lateral, pero que no me muestre más de 6 elementos cuando haya más de éste número. El caso es que los botones no parecen funcionar de forma correcta. Los estilos los cogen bien pero con cuando le doy estilos al ":hover" no aparecen los cambios.
Aparte de éste problema, tengo puesto que cuando se le haga click en el icono de "next" se desplace 100px, pero no funciona...no hace nada.
Dejo HTML:
El código de javascript:
Gracias de antemano!
Quiero realizar un slider lateral, pero que no me muestre más de 6 elementos cuando haya más de éste número. El caso es que los botones no parecen funcionar de forma correcta. Los estilos los cogen bien pero con cuando le doy estilos al ":hover" no aparecen los cambios.
Aparte de éste problema, tengo puesto que cuando se le haga click en el icono de "next" se desplace 100px, pero no funciona...no hace nada.
Dejo HTML:
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
<div class="relacionados">
<div class="relacionados_overflow">
<div class="slider">
<div class="juegos_relacionados">
<img src="caratulas/101_Ways_To_Die_XboxOne.png">
<p>101 Ways To Die </p>
</div>
<div class="juegos_relacionados">
<img src="caratulas/101_Ways_To_Die_XboxOne.png">
<p>101 Ways To Die </p>
</div>
<div class="juegos_relacionados">
<img src="caratulas/101_Ways_To_Die_XboxOne.png">
<p>101 Ways To Die </p>
</div>
<div class="juegos_relacionados">
<img src="caratulas/101_Ways_To_Die_XboxOne.png">
<p>101 Ways To Die </p>
</div>
<div class="juegos_relacionados">
<img src="caratulas/101_Ways_To_Die_XboxOne.png">
<p>101 Ways To Die </p>
</div>
<div class="juegos_relacionados">
<img src="caratulas/101_Ways_To_Die_XboxOne.png">
<p>101 Ways To Die </p>
</div>
<div class="juegos_relacionados">
<img src="caratulas/101_Ways_To_Die_XboxOne.png">
<p>101 Ways To Die </p>
</div>
<div class="juegos_relacionados">
<img src="caratulas/101_Ways_To_Die_XboxOne.png">
<p>101 Ways To Die </p>
</div>
</div>
</div>
<span class="prev"><</span>
<span class="next">></span>
</div>
El código de javascript:
1
2
3
4
5
6
7
8
var gallery_width = $('.juegos_relacionados').width() + 8; // 8 es el margin-right pero le damos 9 para darle un poco más
var numero_complementos = $('.juegos_relacionados img').length;
$('.slider').width(gallery_width*numero_complementos+4); //sumamos 4 para que el último elemento no se situe en la fila de abajo.
$('.next').click(function(){
$('.slider').animate({left: -100}, 800);
})
Gracias de antemano!
Valora esta pregunta
0
