Crea un carrusel con jQuery
En muchas páginas webs hay carruseles que muestran una imagen y un pequeño texto. Un ejemplo de estos carruseles lo podemos ver algunas páginas de empresas de diseño web, donde nos muestras el nombre de uno de sus diseños y una pequeña captura. También son frecuentes en webs de revistas, usados para mostrar los artículos más destacados.
Desde hacía tiempo quería crear un carrusel con jQuery y hace un rato he encontrado un plugin de este framework que es precisamente lo que andaba buscando: Step Carousel.
Para añadir el carrusel basta con enlazar jQuery y el plugin mediante <script /> y luego añadir el siguiente código Javascript, que inicia el carrusel:
[js]
<script type="text/javascript">
stepcarousel.setup({
galleryid: ‘carousel’, //ID del div que contiene el carrusel
beltclass: ‘belt’, //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: ‘panel’, //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: [‘statusA’, ‘statusB’, ‘statusC’], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [‘external’] //content setting [‘inline’] or [‘external’, ‘path_to_external_file’]
})
</script>
[/js]
También es necesario incluir un poco de CSS para que el carrusel funcione correctamente:
[css]#carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 250px;
margin-left:35px;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
}
#carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}
#carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}[/css]
Finalmente, este es el código HTML que usaremos en el carrusel:
[html]
<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)">Anterior</a>
<a href="javascript:stepcarousel.stepBy(‘carousel’, -1)">Posterior</a>
<div id="carousel" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>
<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>
</div>
</div>
[/html]
El código es sencillo de entender y fácil de personalizar. Por ejemplo, para añadir más paneles basta con añadir más bloques, que tienen la siguiente estructura:
[html]
<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>
[/html]
Si lo que queremos es que el link pase dos paneles en lugar de uno, basta con cambiar el -1 o el 1 por -2 o 2 respectivamente.
He montado una demostración del carrusel que se puede ver aquí.
Por último, podéis descargar la demostración desde aquí (incluye imágenes, Javascript y CSS).
Hola!! Buen blog sin duda alguna, enhorabuena por los tutoriales que te curras tío. Solo tengo una duda con el carrusel (y ni idea de programación claro), ¿se puede hacer que el carrusel se mueva automaticamente cada x segundos el solo?
Gracias y de nuevo, enhorabuena
Sí, se puede, basta con modificar esta línea del código que inicia el carrusel:
autostep: {enable:true, moveby:1, pause:3000},
Donde moveby indica el número de paneles que se desplazan cada vez y pause el tiempo entre cada desplazamiento.
Si haces clic en los botones de mover el panel manualmente, se desactiva el movimiento automático.
Hola: He puesto el código para hacer que el carrusel gire sólo pero no funciona, que puede estar mal.
Muchas gracias.
Plugin could not be activated because it triggered a fatal error.
Fatal error: Class wp_carousel_widget: Cannot inherit from undefined class wp_widget in /wp-content/plugins/wp-carousel/wp-carousel.php on line 754
??????
@HugoAlva: Si no das más datos no te puedo decir nada. ¿Qué error te aparece?
@zoooooo: WP Carousel 0.3 only works with WordPress 2.8 or later. The error says that WP Carousel can't create the widget. WP Carousel uses a new API included in WordPress 2.8 to create the widget.
Por cierto, para pedir ayuda sobre WP Carousel, mejor hacerlo en la página del plugin.
En opera se muestra mal en la parte izquierda se rompe el diseño.
Hola, en primer lugar, enhorabuena por tu blog. Aunque es la primera vez que hago un comentario, lo visito muy amenudo.
El carousel me funciona perfectamente, pero he intentado ir un poco más allá, probando a insertar 2 carouseles en una misma página y el segundo no me funciona. He cambiado el nombre del segundo "galleryid", pero no me funciona, alguna pista o detalle que debería tener en cuenta?.
Gracias y ánimo.
@Pedro:
Puede que se deba a que debes repetir el código Javascript que inicia el carrusel. Por ejemplo, si usas un sólo carrusel, el código sería así:
stepcarousel.setup({
galleryid: 'carousel', //ID del div que contiene el carrusel
beltclass: 'belt', //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: 'panel', //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
Sin embargo, si quieres usar dos, debería ser así:
stepcarousel.setup({
galleryid: 'carousel', //ID del div que contiene el carrusel
beltclass: 'belt', //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: 'panel', //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
stepcarousel.setup({
galleryid: 'carousel2', //ID del div que contiene el carrusel
beltclass: 'belt', //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: 'panel', //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
Y luego también deberías repetir el código HTML y CSS de forma similar a como lo he hecho con el Javscript.
@navegante: El código que pongo es sólo de ejemplo, si ves que no se ve correctamente o que no se adapta a tu diseño modíficalo como veas necesario.
Hola muy buena aportación, solo que me marcaba un error en explorer (el clasico error de javascrip), asi que me dedique a ver donde pudiera estar el error y encontre una manera de solucionarlo, no creo que sea la mejor pero lo que hize fue abrir tu carrusel.js y comentar de la linea 112 a la 119, y cambiar en la linea 15 autostep: {enable:false, moveby:1, pause:3000}, esto del index index.html.
Espero que les sirva y si me pueden ayudar a solicionar muchas gracias.
ATTE: JACU
muy bien yo tb comente de la linea 112 a 119 y deje el enable en true y me funcionó perfecto gracias
he estado intentando lo mismo que otro usuario de poner 2 galerias en la misma pagina, he duplicado el scrip y los estilo pero nada ocurre en la segunda, alguien seria tan amable de compartir un ejemplo con 2 carruseles.
Gracias
necesito que me digan com colocar mas de un carousel en una misma pag.
de antemano gracias
Todos los que tengáis problemas con el tema de poner más de un carrusel en una página, he publicado un tutorial sobre cómo hacerlo, que podéis ver aquí.
Hola!
Fantástico el carrusel.
Tengo un pequeño problema. Yo tenía una galería bastante cutre y hacía ampliaciones de las fotos con el conocido prettyPhoto (similar a litebox y otros).
Ahora mi galeria la he transformado en este carrusel y quería seguir haciendo mis ampliaciones con el prettyphoto, sin embargo eso ya no funciona y nose a que puede ser debido.
La inicialización del prettyphoto la hacia en document.ready, mientras que la del carrusel, al igual que haces aquí, no la meto en document.ready. Nose si esto tiene algo que ver o no, pero el caso es que me gustaría hacer ampliaciones de las imagenes que pongo en el carrusel y me encuentro con que el que siempre uso, el prettyPhoto, ahora no carga…
Agradecería aportes! :-(
Pues supongo que será porque la imagen del carrusel tendrá que tener algún atributo extra, algo como rel="lightbox" o similares, pero tampoco te lo puedo asegurar.
Hola, muy buen carrusel. Alguien podria decirme como centrar el texto de cada imagen¿? No consio centrar el contenido del ni del >_<
Para centrar el texto basta que utilices el atributo text-align de CSS. Si utilizas el mismo código CSS que en el tutorial, basta que añadas:
<code>.panel-text { text-align:center; }</code>
Con esto se centrará el texto de cada panel.
hola como estas muchas gracias por tu blog estoy haciendo una galeria de imagenes con un carrusel abajo de la galeria te queria pedir ayuda, mi idea es parecida a la que se muestra en esta pagina http://www.mediotimepo.com me puedes ayudar por favor saludos y muchas gracias
Para hacer un carrusel como ese tendrás que ampliar un poco el script del carrusel, ya que por defecto no se puede hacer que al hacer clic sobre una imagen, cargue contenido en un contenedor (aunque con AJAX se puede hacer sin mucha dificultad).
Por lo demás, es cuestión de adaptar el aspecto mediante CSS y HTML.
Trata de adaptarlo a lo que buscas y si te atascas en algún momento, no dudes en pedir ayuda.
Como decía JACU comentando esas líneas (112-119) del carrusel.js se consigue quitar el error … y a mí me ha conseguido hacer funcionar el modo automático. Sin quitar nada más, dejando autostep:true
hola, excelente post
quisiera que me ayudaran, estoy usando imagenes mas pequenas, por lo que reduje la altura del carrousel, pero la imagen de las flechas se quedo exactamente donde estaban originalmente, osea, quedaron fuera del carrousel y por lo tanto no se ven
he estado buscando por todos los archivos y no encuentro como colocar las imagenes de las flechas mas "arriba" para que queden centradas de nuevo aunque haya reducido la altura de todo el carrousel
y tambien………..tengo el mismo problema, no encuentro la forma de reducir el ancho, quisiera que tuviera un ancho de 700px
saludos
En el código que he puesto en el artículo no está el CSS completo de la demo. En la demo encontrarás este código CSS:
[css]
.button-prev {
height:250px;
width:35px;
float:left;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:10px 0 0 10px;
}
.button-prev a {
display:block;
padding:5px;
margin-top:105px;
}
.button-next {
height:250px;
width:35px;
float:right;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:0 10px 10px 0;
}
.button-next a {
display:block;
padding:5px;
margin-top:105px;
}
[/css]
Fíjate en que se .button-prev y .button-next (las clases que se corresponden con el botón de anterior y posterior) tienen definido una altura, 250px. Cámbila por la que tenga tu carrusel. Por otro lado, si te fijas, los elementos a hijos de un elemento con clase button-prev tienen definido un margen superior de 105px (lo mismo para los elementos a hijos de un elemento con clase button-next).
Para centrar completamente las flechas, el margen superior debería ser: (<altura de los elementos con clase button-prev> – 35)/ 2. En mi demo debería ser: (250 – 35) / 2 = 215 / 2 = 107.5. He redondeado a 105 por comodidad.
Reduciendo los valores de margen superior y de altura del elemento puedes centrar las flechas sin mucha dificultad.
En cuanto al ancho, reduce el ancho de los elementos con clase .panel, ya que no he definido un ancho para el carrusel en sí.
gracias sulomari eres mi idolo!!!!!
una ultima pregunta, esta si de plano no encuentro como hacerlo
creo entender que el texto debajo de las imagenes se encuenra dentro del div panel-text, pero al reducir la altura del div, el texto no quedo "centrado" como orginialmente estaba, quedo "abajo" por decirlo asi
Eso es porque en el CSS he especificado un espaciado (padding). Fíjate en el código CSS y verás (me estoy basando en el código de la demo):
[css]
#carousel .panel .panel-text {
padding-top:5px;
font-size:13px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}
[/css]
Cambia el padding-top:5px; por el tamaño que se adapte mejor. Redúcelo para subir el texto (o mejor dicho, bajarlo menos) o auméntalo para bajar el texto.
hola que tal estoy usando tu utileria pero no mas no jala con ajax, lo que hago es que en el window.onload mando a llamar una funcion que crea mis divs y despues crea el carrusel, espero me puedas ayudar, el error es : stepcarousel no definido
Sin el código Javascript es difícil saber qué pasa. ¿Has cargado el JS de Stepcarousel? Siento no poder ayudarte más, pero no sé demasiado Javascript.
Hola, la verdad buenisimo este carrousel!!! Te queria consultar como puedo hacer para que en vez de 4 fotos a la vez solo se vean de a 1??
Muchas Gracias!!
Lo único que puedes hacer es cambiar el ancho del panel en el CSS:
[css]
#carousel .panel {
/**/ width:665px; /* Cambia este número por los píxels de ancho de tu carrusel */
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}
[/css]
Gracias!!! ahi logre que cambiando ese valor y agragndo un div que contiene todo, lo puedo poner del ancho que solo me muestre 1 foto/descripcion!
Saludos!
muy bueno el articulo del carrusel, necesitaba exactamente algo asi, para un modulo para drupal que estoy desarrollando, resulta que he logrado integrarlo super bien, pero no me corre el carrusel, me podria dar algun idea del por que? lo veo con firefox y el firebug no me da ningun error :-(
gracias de antemano
Lo siento, no creo que pueda ayudarte. Nunca he usado Drupal, ni como usuario ni como desarrollador así que no tengo ni idea de cómo funciona a nivel de APIs y demás.
Lo único que puedo sugerirte es que revises que se han cargado todos los scrips correctamente y que usas una versión compatible con StepCarousel (revisa la página de StepCarousel para saber con qué versión de jQuery es compatible cada versión de StepCarousel).
Hola muy buen tutorial, estuve modificando el carousel de acuerdo a mis necesidades pero lo que quiero saber es en donde puedo cambiar para que en vez de dar clip a los iconos de derecha e izquierda, solo sea necesario posar el mouse para que vaya girando el carousel,mil gracias de antemano por tu apoyo, saludos…
No soy un experto, pero te recomendaría que probases con el evento onMouseover:
[html]
<a onMouseover="stepcarousel.stepBy('carousel', 1)">Anterior</a>
<a onMouseover="stepcarousel.stepBy('carousel', -1)">Posterior</a>
[/html]
Quizás con eso funcione.
Hola que tal experto, ¿Se puede cambiar el color negro grisaceo del carrusel?
Pues claro, el color que he usado yo sólo es para que se noten más los desplazamientos y que tenga más aspecto de carrusel.
Puedes cambiar lo que quieras, revisa el CSS y verás que sólo son un par de colores e imágenes.
Buenas, podriais poner todo el código y los varios archivos exteriores?
Es que soy algo nuevo con jquery y ando un poco perdido.Estoy mirando videotutoriales pero tengo algo de prisa para acabar unos trabajos.
Por lo visto, descargo el plugin(da igual otra version?pork el link que dejas ya no funciona…), creo el archivo css y el java con el jquery, y tengo que enlazar tambien el jquery entero?
Ayuda por favor!!!Necesito saber!!
Gracias de antemano
Puedes ver la página de demostración donde están sólo los archivos necesarios para que funcione el carrusel, y también puedes descargar los archivos de la demo para trastear con ellos (el enlace sí que funciona).
Respecto a lo que comentas de otras versiones, creo que confundes este tutorial con WP Carousel. Este tutorial es para crear un carrusel con StepCarousel, independientemente del CMS que uses (si es que usas alguno, porque no es necesario). WP Carousel, por el contrario, es un plugin de WordPress que agiliza la tarea de crear los carruseles, y sí que tiene diversas versiones que puedes descargar desde WordPress.org.
Sin embargo no tienen relación este tutorial y WP Carousel. Es cierto que ambos ofrecen un diseño similar y usan el mismo script, pero no son lo mismo.
Sobre explicar el código, sinceramente, me parece que el artículo es bastante claro, y si lo que quieres es que te explique cómo funciona WP Carousel, lo siento, pero no lo haré. Primero porque no tengo tiempo, y segundo porque son más de 4000 líneas de código, es un burrada explicar qué hace cada línea. Lo mejor es que leas la documentación del plugin y si quieres revises el código del plugin, que es totalmente gratuito y libre. Todas las funciones están brevemente explicadas cuando se declaran, junto con una explicación de los parámetros que aceptan de modo que no es demasiado complicado entender el plugin, pero requiere tiempo.
de plano no logro hacer que avance solito,
cómo debo modificar esto?
autostep: {enable:true, moveby:1, pause:3000},
podrias poner un ejemplo de carrusel con autoavance???
En teoría debería de funcionar con ese código, aunque aquí tienes más ejemplos.
Ya encontré al fin qué falla al intentar hacer automático la galería. Seguramente te ha faltado poner el campo de los botones, que aunque no se utilicen hay que poner ese campo y si eso ponerlo FALSE, dejo el ejemplo que me ha valido;
galleryid: 'carousel',
beltclass: 'belt',
panelclass: 'panel',
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'],
contenttype: ['inline']
Excelente, gracias
Eres un genio lo sabias!!! gracias por el aporte!! :-D
Hola buen día
Cómo puedo hacer para que el carrusel gire circularmente?????, es decir en lugar de regresar al inicio al terminar las imágenes le siga dando vuelta a todas?
En teoría a partir de la versión 1.9 de StepCarousel se puede hacer, aunque nunca lo he probado. El código quedaría así:
[js]
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'carousel', //ID del div que contiene el carrusel
beltclass: 'belt', //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: 'panel', //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:"slide", persist:true},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
[/js]
Tendrás a la mano esa versión del StepCarousel que me puedas pasar por favor?
Yo no soy el creador de StepCarousel, así que sólo tengo acceso a las versiones disponibles para todo el público.
La versión 1.9 se liberó en verano del año pasado y se puede descargar desde aquí.
como se puede hacer para que este codigo jale los ultimos post de alguna categoria? sin la necesidad de darle el HTML de cada una de las portadas.
Saludos (Y)
Para ese fin creé WP Carousel.
Hola buenas tardes, disculpa para poder poner dos o tres galerías parecidas a esa en la misma página quisiera saber como por que le eh estado moviendo y cambiando el nombre a las variables y al js pero no eh podido me podrías decir como por favor un saludo…
man t pasate exactament lo q buscaba muchas graxias (Y) (Y) (Y) (Y) (Y) (Y) (Y)
Es lo que estaba buscando, lo unico que no me gusta es cuando llega al final del slide, que se regresa al principio, le voy a buscar espero queitarle ese efecto. Gracias
Saludos
Hola Amigo, quería felicitarte por tu publicación, actualmente estoy haciendo una pagina web y me gustaría insertarle este carrusel, sin embargo no logro todavía reducir el tamaño del cinturon, ya que se estira horizontal por toda la pagina y lo que yo requiero es meterlo en un div de unas medidas especificas..
Me puedes dar una ayuda con esto por favor…
gracias (Y)
como lo puedo poner que cambie automatico?
gear777
para dejarlo automatico debes incluir lo siguiente en el html:
/* inluir default buttons despues de panelbehavior */
…
panelbehavior: {speed:500, wraparound:true ,persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: [‘http://i34.tinypic.com/317e0s5.gif’, -5, 80], rightnav: [‘http://i38.tinypic.com/33o7di8.gif’, -20, 80]},
statusvars: [‘statusA’, ‘statusB’, ‘statusC’], //register 3 variables that contain current panel (start), current panel (last), and total panels
…
Saludos
¿Como puedo transformar este carrusel en un carrusel vertica?
A nivel de css ya lo tengo todo organizado, pero el jqueri es lo que no me muestra el carrusel en vertical.
Gracias por adelantado.
Saludos. susana.
Para hacer el carrusel vertical tendrías que dejar StepCarousel y probar con jCarousel u otra alternativa.
StepCarousel no admite scroll vertical.
Hola, muy buena información y muy completo, pero me gustaría saber, si a mayores de las flechas y el paso automático, se podría poner una botonera con números y al pinchar en cada numero fuera a la foto correspondiente. Un Saludo
En teoría, con los datos que te ofrece StepCarousel, es posible saber en qué panel estás y cuántos hay, así como ir directamente a un determinado panel, así que con un bucle podrías crear una lista numérica para ir a cada panel, eso sí, requiere más trabajo que cambiar un valor en una línea de código.
Si te interesa, tienes más información aquí.