carrusel
20 June 2011

jCarousel mi mejor aliado como carrusel jQuery

jCarousel es un plugin Jquery que sirve muchísimo para crear carruseles de ítems y galerías o slides, lo mejor es que es muy personalizable, tiene opciones de dar acciones antes, entre y después de cada transición. En este demo hice un carrusel con botones hacia delante y atrás, espero les sirva como ejemplo.

Demo:

Código:

Selec All Code:
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

 <script type="text/javascript">
function mycarousel_initCallback(carousel) {
 
    jQuery('#forw').bind('click', function() {
        carousel.next();
        return false;
    });
 
    jQuery('#prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};
 
jQuery(document).ready(function() {
    jQuery("#carrusel").jcarousel({
       scroll :1,
	   auto: 3,
       wrap : "both",
       initCallback: mycarousel_initCallback,
	     buttonNextHTML: null,
        buttonPrevHTML: null
	   });
 });
</script>
Selec All Code:
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

 
 
 
<div id="wrap">
<a id="prev" href="#"><</a><a id="forw" href="#">></a>
 
 
 
<ul id="carrusel">
	<li><img src="http://farm3.static.flickr.com/2267/2067440740_dc5a27c7af_z.jpg?zz=1" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2060/2067440172_a378297bfb_z.jpg?zz=1" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2019/2066641497_4bf621e1a5_z.jpg?zz=1" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2252/2066595607_03f9c04d37_b.jpg" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2059/2066594223_d87b4a10e1_z.jpg?zz=1" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2309/2066593657_cb96aaa9e9_z.jpg?zz=1" alt="" /></li>
 
 
</ul>
 
 
</div>
Selec All Code:
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

*{
	margin: 0;
	padding: 0;
 
	border: none;
}
.jcarousel-clip{
	width: 630px;
	position: relative;
	overflow: hidden;
}
 
.jcarousel-clip li{
	width: 630px;
	float: left;
}
 
.jcarousel-clip li img{
	width: 630px;
}
#wrap{
	width: 630px;
	position: relative;
}
 
#prev, #forw{
	padding: 30px 0;
	background: #000;
	text-align: center;
	width: 30px;
	color: #fff;
	text-decoration: none;
	font-size: 25px;
	font-family: arial, sans-serif;
	display: block;
}
#prev{
	position: absolute;
	z-index: 10;
	top: 42%;
}
 
#forw{
	position: absolute;
	z-index: 10;
	right: 0;
	top: 42%;
}

Enlace a página del autor

Descarga mi demo

 

Categorías: Blog |
  • http://twitter.com/Noestiyei Towers J.

    Gracias Sebarrello punto con!!

  • http://twitter.com/gaggobarrera Gabriel Barrera

    Agradecido! tengo una consulta. ¿Qué pasa si quiero direccionar cada foto?, ¿cómo lo hago?

    Gracias!

  • Anonymous

    Hola Gabriel,

    Si quieres linkear las imágenes que están en el carrusel debes agregarlas dentro de un entonces cada elemento de la lista sería:

    Saludos :D

  • Anonymous

    no lo creo pienso que agregando entre lo que dijiste seria mas adecuado o mejor se puede usar una funsion javascript que direccione al evento click

  • Anonymous

    moicapo123 Disculpa, no me habia fijado que el editor de texto me habia modificado el tag A , ahora si pude mostrar bien la solución,
    Saludos

  • Anonymous

    solo quiero ver la funsionanalidad de comentarios de este sistema no trato de ofender a nadie nesecito hacer algo parecido

  • Anonymous

    Moises es mi nombre