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&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>
[/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).

Si ya os conté cómo evitar conflictos entre jQuery y Mootools, hoy os explico para qué estaba usando jQuery en el nuevo diseño.

Probablemente os habréis fijado en el link que dice Sidebar, en el index del blog. Pues bien, este link despliega la sidebar superior del blog.

Para añadir este efecto a tu web debes seguir unos pasos sencillos, comenzando por descargar jQuery.

Read more →