Crea un carrusel con jQuery

jQuery - Carrusel

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:

<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>
Code language: JavaScript (javascript)

También es necesario incluir un poco de CSS para que el carrusel funcione correctamente:

#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; }
Code language: CSS (css)

Finalmente, este es el código HTML que usaremos en el carrusel:

<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&oacute;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>
Code language: HTML, XML (xml)

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:

<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>
Code language: HTML, XML (xml)

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).

61 thoughts on “Crea un carrusel con jQuery

Leave a Reply

Your email address will not be published.

Required fields are marked *

Your avatar