JQuery - 2 carruseles jquery

   
Vista:

2 carruseles jquery

Publicado por kumikokiss (2 intervenciones) el 28/06/2012 07:24:38
Hola que tal!!! estoy haciendo una web hice un carrusel en jquery, ya lo puse en mi web, hasta ahi todo bien, el problema es que necesito 2 carruseles y no uno. Habia pensado en copiar el mismo carrusel y solo cambiarle las clases para darle una posicion diferente y fotos dferentes al anterior; pero no funciona solo queda bien el primero el segundose descuadra todo no se a que se deba no se si alguien, sea tan amable de pasarme un tutorial donde vengan 2 carruseles en un solo html no se lo que ustedes crean sea recomendable de verdad que infinitamente quedaré agradecida con ustedes.


Saludos

Gracias por su ayuda
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 xve

2 carruseles jquery

Publicado por xve (557 intervenciones) el 28/06/2012 10:56:10
Hola kumikokiss nos puedes mostrar el código?
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

2 carruseles jquery

Publicado por kumikokiss (2 intervenciones) el 28/06/2012 17:16:26
Ok mi html es este:
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
<div class="list_carousel2">
		<ul id="foo2">
        <li><a href="#"><img src="images/thumbs/1.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/2.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/3.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/4.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/5.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/6.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/7.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/8.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/9.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/10.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/11.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/12.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/13.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/14.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/15.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/16.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/17.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/18.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/19.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/20.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/21.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/22.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/23.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/24.jpg" alt="image02" /></a></li>
		</ul>
				<div class="clearfix2"></div>
				<a id="prev2" class="prev2" href="#"></a>
				<a id="next2" class="next2" href="#"></a>
			</div>


Mi hoja de estilo es la siguiente:
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
.list_carousel2 {
				display:block;
				position:absolute;
				background: rgba (0, 0, 0, 0.9);
				margin: 0 0 30px 60px;
				width: 938px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				-moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9);
				-webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9);
				box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9);
				top:520px;
				left:43px;
			}
 
 
 
 
			.list_carousel2 ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: block;
				margin-left:18px;
			}
 
			.list_carousel2 li {
				font-size: 40px;
				color: #999;
				text-align: center;
				background-color: #eee;
				border: 3px solid #999;
				width: 65px;
				height: 65px;
				padding: 0;
				margin: 6px;
				display: block;
				float: left;
			}
 
			.list_carousel2 li:hover {
			border-color:#fff;
			}
 
			.list_carousel2.responsive {
				width: auto;
				margin-left: 0;
			}
			.clearfix2 {
				float: none;
				clear: both;
			}
			.prev2 {
				position:absolute;
				display:block;
				left:73px;
				top:40px;
				background:url(../mercadoteniaespecializada.com/images/antes.png);
				width:13px;
				height:20px;
			}
 
			.prev2:hover {
			background:url(../mercadoteniaespecializada.com/images/antes_on.png);
 
			}
 
			.next2 {
				position:absolute;
				display:block;
				left:750px;
				top:40px;
				background:url(../mercadoteniaespecializada.com/images/despues.png);
				width:13px;
				height:20px;
			}
 
			.next2:hover {
				background:url(../mercadoteniaespecializada.com/images/despues_on.png);
			}


EL HTML manda a llamar al siguiente script:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" language="javascript" src="jquery.js"></script>
	<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.6.1.js"></script>
		<script type="text/javascript" language="javascript">
			$(function() {
 
				//	Scrolled by user interaction
				$('#foo2').carouFredSel({
					prev: '#prev2',
					next: '#next2',
					pagination: "#pager2",
					auto: false
				});
 
			});
		</script>


Todo esto lo saque de una web te paso el link para que veas mas o menos lo que deseo hacer:
http://caroufredsel.frebsite.nl/

el carrusel que me interesa es el segundo el que no corre solo; te comento ya lo pude modiicar y colocar en mi pagina, el problema es que necesito dos de esos y cuando lo copio el primero sale bien pero el segundo aparece desacomodado.

Ojala me puedas ayudar de verdad te lo voy a agradecer =(

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
Imágen de perfil de xve

2 carruseles jquery

Publicado por xve (557 intervenciones) el 28/06/2012 23:30:33
Hola kumikokiss, segun veo , lo unico que tendrias que generar es otro <ul id="foo2"> con las otras imagenes, y copiar neuvamente la funcion carouFredSel(), es decir, duplicar el codigo con diferentes id's... por ejemplo:

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
<div class="list_carousel2">
    <ul id="foo2">
        <li><a href="#"><img src="images/thumbs/1.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/2.jpg" alt="image02" /></a></li>
        ...
    </ul>
    <div class="clearfix2"></div>
    <a id="prev3" class="prev2" href="#"></a>
    <a id="next3" class="next2" href="#"></a>
 
    <ul id="foo3">
        <li><a href="#"><img src="images/thumbs/51.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/thumbs/52.jpg" alt="image02" /></a></li>
        ...
    </ul>
    <div class="clearfix3"></div>
    <a id="prev3" class="prev3" href="#"></a>
    <a id="next3" class="next3" href="#"></a>
</div>
 
<script type="text/javascript" language="javascript">
    $(function() {
        //        Scrolled by user interaction
        $('#foo2').carouFredSel({
            prev: '#prev2',
            next: '#next2',
            pagination: "#pager2",
            auto: false
        });
        $('#foo3').carouFredSel({
            prev: '#prev3',
            next: '#next3',
            pagination: "#pager3",
            auto: false
        });
    });
</script>

Creo que con esto bastaría... coméntanos, ok?
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