Requerimientos
Carousel.js necesita de ambas librerías Prototype y Script.aculo.us para su funcionamiento.
Puedes descargarlas desde aqui y aqui o en su lugar usar las que nos ofrece google:
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
Uso
1.Descargue carousel.js o carousel-min.js
2.Adjunte el script en su pagina, después las librerías Prototype y Script.aculo.us:
<script type="text/javascript" src="url-prototype.js"></script>
<script type="text/javascript" src="url-scriptaculous.js"></script>
<script type="text/javascript" src="url-carousel.js"></script>
HTML y CSS
El minimo de capas que debe tener el cuerpo del carrusel son:
- Carousel-wrapper: Es el contenedor mayor y en el se encuentra el carousel.
- Carousel-content: Esta capa contiene los slides, en ella se pueden incluir el numero de diapositivas que se quiera.
- slide: esta pequeña capa contiene lo que se va a mostrar en cada diapositiva, ya sean imágenes, archivos de flash, html, etc.
<div id="carousel-wrapper">
<div id="carousel-content">
<div class="slide"></div>
<div class="slide"></div>
...
<div class="slide"></div>
</div>
</div>
#carousel-wrapper {/*se definen las propiedades del contenedor mayor*/
width: 500px;
height: 500px;
overflow: hidden; /*se esconden las barras de scroll*/
}
#carousel-content {
width: 2500px; /*se define el ancho que podrán tener todos los slides juntos, si se exceed el carousel va a formar un "Segundo piso" asi que no importa el valor, cuanto mas ancho mejor.*/
}
#carousel-content .slide {/*define las propiedades de cada diapositiva*/
float: left;
width: 500px;
height: 500px;
}
Esto generará un carrusel de 500px por 500px con un movimiento horizontal. El cambio a movimiento vertical es tan simple como establecer el ancho de #carousel-content por 500px y la altura de una sola diapositiva.
Iniciar Carousel.js
Usted debe inciar su script asi:
new Carousel(wrapper, slides, triggers, {options});
por ejemplo, para el codigo de arriba, el script podria quedar de la siguiente manera:
new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'));
Disparadores
Hay dos categorías de elementos que desencadenan el movimiento del carrusel: los que provocan directamente un salto a la diapositiva seleccionada (salto a la diapositiva "x"), y los que iniciar una relación saltar (salto a la primera / última / anterior / siguiente diapositiva). La combinación de un disparador de la clase atributos rel y class decididen la conducta del Carrusel.
Por ejemplo, al hacer clic en:
<a href="javascript:" class="carousel-jumper" rel="slide-1">Ir a slide 1</a>
El carrusel irá a la diapositiva que tiene el id "slide-1". Y si:
<a href="javascript:" class="carousel-control" rel="prev">Slide Anterior</a>
El carrusel irá al slide anterior. Las opciones disponibles para el atributo rel son: first, last, prev y next.
Opciones Disponibles
Se dan opciones como el ultimo parámetro en la inicialización del script:{option: value, option: value}
| Opciones | Predeterminado | Descripcion |
| duration | 1 | La duracion de un salto o movimiento |
| auto | false | Cuando sea TRUE el carrusel se moverá sin necesidad de disparadores, útil para pases de diapositivas. |
| frequency | 3 | Cuando el atributo auto está en modo true, este dicta cuanto tiempo permanecen las diapositivas hasta el próximo movimiento. |
| visibleSlides | 1 | A pesar de que múltiples diapositivas se pueden hacer visibles a la vez, por el estilo, este parámetro es necesario en algunas ocasiones. |
| circular | false | Por opciones predeterminadas, cuando la primera/ultima diapositiva se alcanza, el llamado prev/next no hace nada. Si desea que el efecto continúe, usted debe hacer dos cosas: establecer el parámetro circular en modo true y duplicar la primera diapositiva en el HTML. Es la única manera de dar la impresión de un movimiento continuo. |
| wheel | true | True o false para deslizar el carrusel utilizando la rueda del ratón. |
| effect | scroll | Puede elegir entre los efectos scroll y fade. Cuando use el fade, no son necesarios los parámetros circular y el duplicar la primera diapositiva (vea el ejemplo 3 para el efecto fade) |
| transition | sinoidal | Los dos tipos de transiciones son : sinoidal y spring (vea el ejemplo 2 para aprender mas sobre el efecto spring) |
| selectedClassName | carousel-selected | Cuando se activa un salto de carrusel con carousel-jumper (salta a la diapositiva especificada), esta clase de CSS, se añadirá al gatillo o botón, lo que le ayudará visualmente a poner en relieve los enlaces.(ver el ejemplo online) |
| beforeMove | null | Función de usuario que se ejecutará antes de que los saltos se inicien. Por ejemplo: (beforeMove: function () (alert ( "Aquí voy!");)) |
| afterMove | null | Al igual que beforeMove, sólo se le llama después de que el traslado se ha completado |
| Demo | Download Source | Autor |
27 comentarios
muy bueno el carousel,..me queda la duda como hacer el slide vertical...
Posted on 9/04/2009 8:10 a. m.
Solo debes modificar el ancho, en el css, de #carousel-content y de #carousel-wrapper hasta que se ajuste a tus necesidades. En el codigo css dice para que sirve cada sección, si tienes alguna duda solo pregunta de nuevo o contactame.
Posted on 9/04/2009 8:50 a. m.
hola si estuvo de lujo este ejemplo de prototype gracias m saco de un apuro
Posted on 10/02/2009 7:27 p. m.
Por eso mismo lo postee, por el cambio de jQuery a Scriptaculous en la plantilla. Gracias por tu opinion :)
Posted on 10/02/2009 7:49 p. m.
Muy bueno y bien explicado. Listo en 2 minutos!! :)
Posted on 10/05/2009 11:09 a. m.
Muy bueno el post amigo, yo hice un carrusel entrede mi header y warpaper, pero me late querer hacer uno mas pero en la parte de categorias, ahi quiero uno pequeño, es quiero mostrar otras cosas nuevas, se me hizo complicado entender tu tutorial, me mareo tanto codigo html, seria mejor si lo explicaras como hacer para blogger, por favor, quisiera que me respondieras a carromo26@gmail.com, de todas formas, me agrada tu blog esta de lujo :O
Posted on 11/25/2009 3:06 p. m.
puedo ponerlo en ves de jquery uy poner este Scriptaculous si es asi .. me dices...
Posted on 12/03/2009 11:24 p. m.
No entiendo tu pregunta, estas usando jQuery y deseas cambiarlo por scriptaculous?
Posted on 12/04/2009 5:32 p. m.
Excelente tu script, muy fácil de implementar
Felicitaciones !!!
Salu2
Posted on 2/08/2010 7:24 a. m.
Muchas gracias, no es mi script, pero es muy facil de implemenntar y una gran alternativa a jquery.
Gracias por tu opinion :)
Posted on 2/08/2010 5:03 p. m.
Hola!
Primero agradecer el post!! esta excelente y aun mejor el blog!...
retomando..me marca un error "clase no definida" cada vez que mando a llamar la clase Carousel desde el index y tambien en el javascript de carousel.js
Posted on 2/24/2010 11:12 a. m.
Ola q tal pasando x aqui es muy bueno este carrusel grax x el aporte oye una pregunta: Asi como a ti tmbn el diseño es mi pasion crees q me podrias compartir que script o que cosa le agregaste a tu plantilla para que apareciera esto de aca abajo? lo de acerca de mi, contacto, tambien leo, etc. se me hace una funcion muy útil espero me respondas.
P.D. Muy buen blog de los mejores diseños que he visto
sigue asi :) :o
Posted on 3/06/2010 11:35 a. m.
Estas secciones estan hechas con html y css, el unico script utilizado es para los tooltips [puedes verlo aqui].
Posted on 3/08/2010 5:22 a. m.
Chamo, te felicito esta excelente el carrusel, totalmente funcional...
Posted on 6/08/2010 10:48 a. m.
Gracias me sirvió mucho, ahora estoy adatándolo a la gráfica de mi cliente....gracias desde Santiago de Chile...
Posted on 6/11/2010 1:44 p. m.
I would like to exchange links with your site www.blogger.com
Is this possible?
Posted on 8/01/2010 3:40 p. m.
que bien a toda madre
Posted on 12/10/2010 12:47 p. m.
Excelente, gran aporte sobre todo desde lo práctco. Gracias desde Mendoza
Posted on 8/20/2011 7:04 a. m.
No me funciona ni en Explorer 8 ni en chrome algo tiene que no funciona el demo. :o
Posted on 4/16/2012 1:13 p. m.
ebook devices reviewes http://audiobookscollection.co.uk/es/Getting-Started-in-Finding-a-Financial-Advisor/p224138/ the daily grammar lessons ebook download [url=http://audiobookscollection.co.uk/es/The-7-Habits-of-Highly-Effective-Families/p172244/]tiny ebook reader download[/url] free ebook picture framing
Posted on 2/08/2013 11:46 p. m.
ebook reader mediaworld http://audiobookscollection.co.uk/it/Energy-Leadership-Transforming-Your-Workplace-and-Your-Life-from-the-Core/p219112/ when the bough breaks ebook [url=http://audiobookscollection.co.uk/fr/Designing-Embedded-Systems-with-PIC-Microcontrollers-Second-Edition-Principles-and-Applications/p217873/]ebook monthly membership club[/url] brockmann princess ebook pdf
Posted on 2/12/2013 7:00 p. m.
servman software review http://buyoemsoftware.co.uk/it/category-100-112/Multimediale-e-Divertimenti?page=4 tablet pc software programs [url=http://buyoemsoftware.co.uk/it/product-37137/Sothink-DHTML-Menu-8-2]windows free backup software[/url] blackberry 8700c video player software
[url=http://buyoemsoftware.co.uk/product-17472/TypeIt4Me-X-4-0-Mac]TypeIt4Me X 4.0 [Mac] - Download OEM, Software Sale, OEM Software[/url] small business software solutions
[url=http://buyoemsoftware.co.uk/fr/product-36951/MAGIX-Music-Maker-MX-Premium-18-0-German][img]http://buyoem.co.uk/image/3.gif[/img][/url]
Posted on 2/26/2013 10:15 p. m.
technical data computer software presentation http://buysoftwareonline.co.uk/product-33960/OO-DiskImage-Workstation-5-5-x64 glx wastewater software canada [url=http://buysoftwareonline.co.uk/it/product-37219/MyTrigger-1-7]acd systems leader recognized software[/url] smc2632w ipaq software
[url=http://buysoftwareonline.co.uk/category-12/Multimedia-and-Entertainment?page=126]Multimedia & Entertainment - Download OEM, Software Sale, OEM Software[/url] westell software downloads
[url=http://buysoftwareonline.co.uk/product-15305/ForkLift-1-1-Mac][img]http://buyoem.co.uk/image/5.gif[/img][/url]
Posted on 3/03/2013 9:04 p. m.
[url=http://certifiedpharmacy.co.uk/products/generic-imitrex.htm][img]http://onlinemedistore.com/5.jpg[/img][/url]
continuumcare pharmacy barboursville west virginia http://certifiedpharmacy.co.uk/products/reglan.htm surrey center pharmacy [url=http://certifiedpharmacy.co.uk/products/retin-a-0-05-.htm]online pharmacy tussionex[/url]
find a reliable canadian pharmacy http://certifiedpharmacy.co.uk/products/dostinex.htm pharmacy ce 2008 [url=http://certifiedpharmacy.co.uk/products/hangoff-helper.htm]hangoff helper[/url]
speciality pharmacy search http://certifiedpharmacy.co.uk/categories/stop-smoking.htm brant pharmacy [url=http://certifiedpharmacy.co.uk/products/phenergan.htm]watsons pharmacy jinan[/url]
bonded delivery service for pharmacy http://certifiedpharmacy.co.uk/products/avodart.htm online pharmacy law ceu [url=http://certifiedpharmacy.co.uk/products/cefixime.htm]cefixime[/url]
Posted on 4/07/2013 1:06 p. m.
[url=http://englandpharmacy.co.uk/products/risperdal.htm][img]http://onlinemedistore.com/6.jpg[/img][/url]
buy ambien from online pharmacy http://englandpharmacy.co.uk/products/provigrax.htm herbal pharmacy [url=http://englandpharmacy.co.uk/catalogue/g.htm]pharmacy cross stitch[/url]
healthpartners bloomington mn clinic pharmacy http://englandpharmacy.co.uk/catalogue/v.htm nebmed pharmacy [url=http://englandpharmacy.co.uk/products/vitamin-c.htm]vitamin c[/url]
brazil canadian pharmacy http://englandpharmacy.co.uk/products/cipro.htm town and country pharmacy [url=http://englandpharmacy.co.uk/categories/gums.htm]presaton pharmacy[/url]
valley pharmacy langley http://englandpharmacy.co.uk/catalogue/y.htm new levitra pharmacy information [url=http://englandpharmacy.co.uk/products/femcare.htm]femcare[/url]
Posted on 4/13/2013 3:07 a. m.
[url=http://englandpharmacy.co.uk/products/brahmi.htm][img]http://onlinemedistore.com/4.jpg[/img][/url]
wal mart pharmacy http://englandpharmacy.co.uk/products/topamax.htm ativan pharmacy [url=http://englandpharmacy.co.uk/products/cialis-super-active-plus.htm]ingles pharmacy[/url]
job discription pharmacy technician http://englandpharmacy.co.uk/products/voltaren.htm hoppers pharmacy [url=http://englandpharmacy.co.uk/products/precose.htm]precose[/url]
saline solution pharmacy only http://englandpharmacy.co.uk/products/dipyridamole.htm adipex online pharmacy [url=http://englandpharmacy.co.uk/catalogue/r.htm]tesco pharmacy[/url]
pharmacy approval letters http://englandpharmacy.co.uk/catalogue/y.htm rite aid pharmacy store locations [url=http://englandpharmacy.co.uk/products/mentax.htm]mentax[/url]
Posted on 4/17/2013 2:06 a. m.
who is matt bellamy dating http://loveepicentre.com/success_stories/ 100 free penpal dating site
oklahoma city classified call girl dating [url=http://loveepicentre.com/testimonials/]gabriell union dating ludicrous[/url] daily telegraph dating
duke dating gerald henderson [url=http://loveepicentre.com/advice/]dating australia online site[/url] dating sales [url=http://loveepicentre.com/user/roza734f/]roza734f[/url] ireland dating site free
Posted on 5/27/2013 4:13 p. m.
Publicar un comentario en la entrada al viejo estilo