Muchas veces nos vemos obligados a tener que realizar un carrusel de forma sencilla y rápida para una web. Sin complicarnos mucho, se puede montar un carrusel más o menos sencillo con jQuery y mousewheel.

Antes de empezar

Primero descargamos y/o linkamos tanto jQuery y Mousewheel.

Un carrusel se construye con al menos dos elementos: un contenedor que enmascara un contenido y el contenido.

Fig. 1.0

En la Fig. 1.0 el recuadro naranja sería el contenedor, que tiene un alto y ancho fijos, y el recuadro gris el contenido, la parte oscura es lo que se ve y la parte clarita lo que queda oculto por el overflow.

::n::::t::
::n::::t::::t::
...
::n::::t::::t::
...
::n::::t::::t::
...
::n::::t::::t::...::n::::t::::t::
...
::n::::t::
::n::

En nuestro caso, la capa con clase "container" será la capa que enmascara el contenido y la capa con clase "item-container" será el cajón donde se mete todo lo que se requiera del carrusel, que los marco con la clase "item", por ejemplo.

Un poco de CSS

.container {::n::::t::width: 200px;::n::::t::height: 100px;::n::::t::overflow: hidden;::n::}

La clase "container" tendrá un ancho fijo, necesario para que se enmascare el contenido y un "overflow: hidden" para que no se muestre el contenido que no entre en el hueco del contenedor. Si no ponemos ese "hidden", el contenido se vería y el truco no tendría sentido.

El contenedor de objetos o "item-container", deberá tener un ancho definido, para evitar que los objetos "caigan" cuando lleguen al máximo del contenedor:

.item-container{::n::::t::width: 500px;::n::}

Vamos a pensar en un carrusel en el que se muestren 2 items de un total de 5, con 50px por item queda estupendo.

.item {::n::::t::width: 100px;::n::::t::height: 100px;::n::::t::display: block;::n::::t::float: left;::n::}::n::.item-content{::n::::t::position:relative;::n::::t::display:block;::n::::t::width: 48px;::n::::t::height:48px;::n::::t::background: black;::n::::t::border:1px solid white;::n::::t::margin: 25px;::n::}


El resultado sería el siguiente:

Añadiendo algo de programación

Como se ve, el carrusel oculta los elementos, por lo que no es del todo funcional, es necesario añadir algo de Javascript para que se mueva un poco. Vamos a trabajar con jQuery, porque es un framework de Javascript que nos permite manipular de forma sencilla el DOM y, entre otras características, nos soluciona la vida para signar eventos y añadir animaciones. Sin pretender hacer algo muy complicado, imaginemos algo así:

  • Queremos dos botones o flechas que nos permitan pasar a delante y hacia atrás nuestros elementos del carrusel.
  • Queremos una animación (sencilla) como deslizando los elementos (sin muchas pretensiones ojo).

Para conseguir esto, vamos a jugar con el "scrollLeft" del contenedor de "items" de modo que le sumamos o restamos un valor para que se mueva, pero antes necesitamos los dos botones.

Añadimos el css necesario para ello, necesitamos cambiar la posición del contenedor para que los botones los podamos posicionar de forma absoluta sobre el mismo. Encapsulamos todo en un contenedor que contendrá el carrusel y las flechas por separado (realmente las flechas puede ser lo que se quiera, por eso no añado la estructura de HTML):

.e{::n::::t::position:relative;::n::::t::width:200px;::n::::t::height:100px;::n::::t::margin:0px auto;::n::}::n::.e_container {::n::::t::width: 200px;::n::::t::height: 100px;::n::::t::overflow: hidden;::n::::t::background: orange;::n::::t::margin: 0px auto;::n::}::n::.arrow-left{::n::::t::width:0;::n::::t::height:0;::n::::t::border-top: 10px solid transparent;::n::::t::border-bottom: 10px solid transparent;::n::::t::border-right: 10px solid #f8e4b9;::n::::t::position:absolute;::n::::t::top: 50%;::n::::t::margin-top: -5px;::n::::t::cursor: pointer;::n::}::n::.arrow-right{::n::::t::width:0;::n::::t::height:0;::n::::t::border-top: 10px solid transparent;::n::::t::border-bottom: 10px solid transparent;::n::::t::border-left: 10px solid #f8e4b9;::n::::t::position:absolute;::n::::t::right: 0px;::n::::t::top: 50%;::n::::t::margin-top: -5px;::n::::t::cursor: pointer;::n::}

De modo que ahora sólo quedaría añadir la programación de que se mueva el contenido con el clic en cada flecha.


var scrollBussy = false;::n::$( function(){::n::::t::$( '.arrow-right' ).bind( 'click',function ( event ) {::n::::t::::t::event.preventDefault();::n::::t::::t::if( scrollBussy===false ){::n::::t::::t::::t::scrollBussy = true;::n::::t::::t::::t::$( '.e_item-container' ).stop().animate( {::n::::t::::t::::t::::t::scrollLeft: "+=250"::n::::t::::t::::t::}, 750,function(){::n::::t::::t::::t::::t::scrollBussy = false;::n::::t::::t::::t::} );::n::::t::::t::}::n::::t::} );::n::::t::$( '.arrow-left' ).bind( 'click',function ( event ) {::n::::t::::t::event.preventDefault();::n::::t::::t::if( scrollBussy===false ){::n::::t::::t::::t::scrollBussy = true;::n::::t::::t::::t::$( '.e_item-container' ).stop().animate( {::n::::t::::t::::t::::t::scrollLeft: "-=250"::n::::t::::t::::t::}, 750,function(){::n::::t::::t::::t::::t::scrollBussy = false;::n::::t::::t::::t::} );::n::::t::::t::}::n::::t::} );::n::::t::...


Para la parte de mouseWheel, que nos permitirá mover el contenido con la rueda del ratón:

::n::::t::$( '.e_item-container','.e_container' ).mousewheel( function ( event,delta,deltaX,deltaY ){::n::::t::::t::event.preventDefault();                     ::n::::t::::t::if( delta ::lt:: 0 ){::n::::t::::t::::t::$( '.arrow-right' ).click();::n::::t::::t::}else{::n::::t::::t::::t::$( '.arrow-left' ).click();::n::::t::::t::}::n::::t::});::n::});

El comentario será validado antes de mostrarse.