Creando múltiples carruseles con jQuery
En vista de que algunos tenían problemas para mostrar varios carruseles con aquel tutorial que escribí sobre cómo crear un carrusel con jQuery, hoy voy a explicar cómo crear varios carruseles, a modo de continuación del anterior tutorial, así que os recomiendo leerlo antes de continuar con éste.
Bien, partiremos del código que usé en la demo (que podéis descargar aquí), y tendremos que cambiar tanto el CSS como el Javascript que hay incrustado en el HTML, dejando intacto los dos primeros códigos Javascript que llamamos (jQuery y Stepcarousel), en definitiva, que partiremos del siguiente código:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carousel con jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="carousel.js" type="text/javascript"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: ‘carousel’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
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>
<style type="text/css">
/* Carousel */
#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;
}
#carousel .panel .panel-text {
padding-top:5px;
font-size:13px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}
#carousel .panel .panel-text a {
color:#CCC;
text-decoration:none;
}
#carousel .panel .panel-text a:hover {
color:#FFF;
text-decoration:underline;
}
/* Botones del carousel */
.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;
}
a img {
border:none;
}
</style>
</head>
<body>
<div class="button-next">
<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy(‘carousel’, -1)"><img src="arrow_left.png" /></a>
</div>
<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 class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>
<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>
<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>
<div class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/html]
Vale, primero nos centraremos en el CSS, que es la parte más fácil de adaptar, lo que tenemos que hacer es cambiar todas las líneas que definan un estilo para el elemento con ID carousel, ya que al haber varios carruseles necesitaremos un estilo común a ellos, y no es lo mejor usar el mismo ID para dos elementos (además de que no sería compatible con Stepcarousel), así que básicamente lo que tenemos que hacer es cambiar #carousel por .carousel, dejando el código CSS así:
[css]
/* Carousel */
.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;
}
.carousel .panel .panel-text {
padding-top:5px;
font-size:13px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}
.carousel .panel .panel-text a {
color:#CCC;
text-decoration:none;
}
.carousel .panel .panel-text a:hover {
color:#FFF;
text-decoration:underline;
}
/* Botones del carousel */
.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;
}
a img {
border:none;
}
[/css]
Como os podréis imaginar, ahora tendremos que actualizar el código HTML del carrusel para que se adapte al nuevo CSS. Lo único que hay que hacer es añadir la clase carousel al div con ID carousel. Fácil, ¿verdad? El código quedará así:
[html]
<div class="button-next">
<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy(‘carousel’, -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel" class="stepcarousel carousel">
<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 class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>
<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>
<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>
<div class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
[/html]
Lo siguiente será crear el código HTML del segundo carrusel. En mi caso serán idénticos (tendrán los mismos elementos), así que lo único que tendré que hacer será duplicar el código HTML y cambiar la ID del segundo carrusel de “carousel” a “carousel2“, de forma que el código quedará así:
[html]
<div class="button-next">
<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy(‘carousel’, -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel" class="stepcarousel carousel">
<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 class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>
<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>
<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>
<div class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
<div class="button-next">
<a href="javascript:stepcarousel.stepBy(‘carousel2’, 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy(‘carousel2’, -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel2" class="stepcarousel carousel">
<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 class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>
<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>
<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>
<div class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
[/html]
Ya sólo queda adaptar el código Javascript. Lo primero que tenemos que hacer es añadir una línea más al código original que nos evitará problemas: defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]}, . A continuación duplicaremos el código y añadiremos un punto y coma (;) al final del código original. Por último cambiaremos la ID que hay en el segundo código de “carousel” a “carousel2“. El código Javascript quedaría así:
[javascript]
stepcarousel.setup({
galleryid: ‘carousel’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]},
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 of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]},
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’]
})
[/javascript]
Y con esto ya lo tenemos acabado. El código final que tendríamos sería este:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carousel con jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="carousel.js" type="text/javascript"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: ‘carousel’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]},
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 of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]},
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>
<style type="text/css">
/* Carousel */
.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;
}
.carousel .panel .panel-text {
padding-top:5px;
font-size:13px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}
.carousel .panel .panel-text a {
color:#CCC;
text-decoration:none;
}
.carousel .panel .panel-text a:hover {
color:#FFF;
text-decoration:underline;
}
/* Botones del carousel */
.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;
}
a img {
border:none;
}
</style>
</head>
<body>
<div class="button-next">
<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy(‘carousel’, -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel" class="stepcarousel carousel">
<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 class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>
<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>
<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>
<div class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
<div class="button-next">
<a href="javascript:stepcarousel.stepBy(‘carousel2’, 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy(‘carousel2’, -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel2" class="stepcarousel carousel">
<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 class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>
<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>
<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>
<div class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/html]
Como en el tutorial anterior, he publicado una pequeña demo para que veáis el código en acción, que podéis descargar desde aquí.
Nota: Acabo de ver que han actualizado el script de Stepcarousel y le han añadido algunas funciones nuevas. En cuento tenga algo de tiempo libre (últimamente ando algo ocupado) actualizaré WP Carousel.
Simplemente una recomendación, jaja: podías esconder el código en cajitas porque es una barbaridad la cantidad que es. O si no que el tutorial en sí aparezca después de un "Leer más".
xDD
Jaja sólo son un par de cientos de líneas, ahora mismo WP Main Menu tiene ya casi 1000 líneas :)
Es una burrada… jaja
Perfecto men gracias por responder!! me faltaba una toteria!!! gracias!!!!
Tengo la siguiente duda, has probado en hacer el carrusel con un bucle php, para que genere x carruseles según los que tengas almacenados en la base de datos?
stepcarousel.setup({
galleryid: 'carouselid?>', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
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']
})
Yo probé a escribir esto y al igual la misma linea en la identificación de los carruseles. Gracias de antemano.
Sí, y precisamente de ahí surgió WP Carousel :) .
Ok le voy a hechar un vistazo haber que tal esta!!Muchas gracias!!