Jquery + HTML Miniatura desplazamiento

Quiero crear una lista de miniaturas con un botón anterior y otro al lado, mostrando 10 miniaturas a la vez y ocultando el rest, y cuando llegas al décimo tumbling y haces clic en el siguiente botón, el primero desaparece y aparece el 11mo.

Lo he intentado con: Javascript

jQuery(document).ready(function() { var count = 0; var images = 11; var page = 1; var current = 1; jQuery('.ice-navigator li').each(function(index) { count++; jQuery(this).attr('id', 'menu-item-' + count); jQuery(this).attr('class', 'menu-page-' + page); if(count >= (page * images)) { page++; } jQuery(this).hide(); }) jQuery('.ice-navigator li.menu-page-1').show(); jQuery('.ice-next').click(function() { if(current >= count) { current = 1; } else { current++; } item = jQuery('.ice-navigator li#menu-item-' + current); if(jQuery(item).hasClass('active')) { jQuery(item).removeClass('active'); page = jQuery('.ice-navigator li#menu-item-' + current).attr('class'); jQuery(item).addClass('active'); } else { page = jQuery('.ice-navigator li#menu-item-' + current).attr('class'); } jQuery('.ice-navigator li').hide(); jQuery('.ice-navigator li.' + page).show(); }) jQuery('.ice-previous').click(function() { current--; if(current <= 0) { current = count; } item = jQuery('.ice-navigator li#menu-item-' + current); if(jQuery(item).hasClass('active')) { jQuery(item).removeClass('active'); page = jQuery('.ice-navigator li#menu-item-' + current).attr('class'); jQuery(item).addClass('active'); } else { page = jQuery('.ice-navigator li#menu-item-' + current).attr('class'); } }) jQuery('.ice-navigator li').click(function() { current = jQuery(this).attr('id').replace('menu-item-', ''); }) }) 

HTML

 
Previous
  • THUMBNAIL 1
  • THUMBNAIL 2
  • [...]
  • THUMBNAIL 11
  • THUMBNAIL 12
Next

¡Gracias!

Editar : ahora entiendo que es como una referencia circular. He hecho algunos cambios en consecuencia.

Vea mi DEMO actualizada aquí

A continuación se muestra la navegación regular que se detiene cuando llega al final.

Mira mi vieja DEMO aquí.

Usé 2 punteros para administrar la posición de inicio y final. Implementé la función adjustNav para mostrar / ocultar div basado en la posición de inicio y final.

Esto parece un trabajo para jCarousel: http://sorgalla.com/jcarousel/

Hay otros complementos que proporcionan esta funcionalidad. Acabo de utilizar jCarousel en otro proyecto y fue lo primero que pensé.

EDITAR

No me di cuenta de que no quieres usar un complemento. Podrías hacer esto con jQuery codificado a mano, pero vas a escribir mucho código.