Crear un pasador con jQuery

Vamos a ver como crear un pasador sencillo con jQuery. Para ello lo primero es crear la estructura html, donde tendremos básicamente una capa contenido con un ancho fijo y overflow oculto, y dentro de esta una capa llamada carril que contiene todos los elementos del pasador, y será la que iremos moviendo de posición para así conseguir el efecto buscado.

Los enlaces para pasar de página los colocamos en una capa padre a la capa contenido, dado que la capa contenido tiene overflow oculto y de meterlos dentro no se verían. Por tanto tendremos el siguiente código css:

div.marco div.contenido {
   width: 172px;
   height: 80px;
   overflow: hidden;
   margin-left: 20px;
}
div.marco div.contenido div.carril {
   position: relative;
   white-space: nowrap;
}
div.marco div.contenido div.carril div.mini {
   display: inline-block;
   _display: inline;
   #display: inline;
   width: 80px;
   height: 80px;
   overflow:hidden;    
}

A descatar que los elementos que van dentro del carril, los colocamos con inline-block, y la capa padre (carril) va con white-space: nowrap para que estos elementos del pasador no salten de línea.

Ahora solo queda crear el código javascript que mueva el pasador, para ello necesitamos saber cuanto tamaño debemos desplazar el carril para hacer el cambio de página y simular el pasador. Este tamaño lo calculamos sabiendo la distancia que separa un elemento del carril (un div.mini) de otro, más su ancho, y multiplicamos el resultado por el número de items que tenemos por página.

       if (nitems <= itemsxpag) {
           $(this).find("a.next").remove();
           $(this).find("a.prev").remove();
       }
       else {
           $(this).parent().find("a.next").click(function (e) {
               e.preventDefault();

               if (pagactual == npages)
                   return;
               $(self).parent().find("a.prev").removeClass("nomore");
               
               ul.animate({left:"-=" + ancho + "px"});
               pagactual++;
               
               if (pagactual == npages)
                   $(this).addClass("nomore");
           });
           $(this).parent().find("a.prev").click(function (e) {
               e.preventDefault();

               if (pagactual == 1)
                   return;
               $(self).parent().find("a.next").removeClass("nomore");
               
               ul.animate({left:"+=" + ancho + "px"});
               pagactual--;
               if (pagactual == 1)
                   $(this).addClass("nomore");
           });
       }

En este código creamos los manejadores para los clicks de los enlaces de siguiente y atras, donde básicamente comprobamos en que página nos encontramos y si hay más páginas en la dirección en la que nos piden desplazarnos. La animación se hace con animate de jQuery, y como podemos ver modificamos la posición (con left) de la capa carril, sumandole el ancho en caso de ir a una página siguiente, o restandole el ancho en caso de ir a una página anterior.

Se puede ver el pasador explicado en funcionamiento aquí.