Movimiento Divs

[Banditolane]

Buenas a todos:

Estoy trabajando en un visor de imágenes realizado con jQuery y tiene una div que contiene las miniaturas de las imágenes a mostrar. Es algo complicado de explicar... a ver, tenemos una div principal (div#1 de aquí en adelante) con overflow:hidden;. Dentro de ésta tenemos otra mas ancha (div#2 de aquí en adelante) que contiene a su vez otras divs (mins de aquí en adelante) donde se encuentran las miniaturas. Bien, la idea es que div#2 se desplace dentro de div#1 sin que se vean el resto de mins ocultas. Os pongo un esquema para que lo veáis más claro:



Vale, creo que está más o menos claro. El problema lo tengo a la hora de desplazar div#2, que tiene position:absolute; y un valor determinado en right. Estoy utilizando éste código JavaScript:

Código:

var pos_ini;
var next;
var prev;
pos = $("#mins_mov").position();
pos_ini = pos.left;
next = pos_ini-330;
prev = pos_ini-423;

$("#bnt1").click( function() {
     $("#div2").animate({right:next}, 'easein');
    pos = $("#div2").position();
    pos_ini = pos.left;
     next += 93;
});

$("#btn2").click( function() {
     $("#div2").animate({right:prev}, 'easein');
     pos = $("#div2").position();
     pos_ini = pos.left;
     prev -= 93;
});

Y este el CSS+HTML:

Código HTML:

/* CSS */
#div1 {
    width:62px;
    height:423px;
    padding-right:29px;
    padding-top:25px;
    background:url("img/tr5_bg.png");    
    overflow:hidden;    
    position:absolute;    
    z-index:99;    
    top:-30px;    
    right:0px;
}

#div2 {        
    width:500px;    
    height:423px;    
    padding-left:3px;    
    padding-right:17px;    
    padding-top:25px;    
    margin-top:30px;    
    background:url("img/tr5_bg.png");    
    overflow:hidden;    
    position:absolute;    
    z-index:99;    
    top:-30px;    
    right:-426px;    
}

.mins {
    width:71px;    
    height:423px;    
    padding-right:20px;        
    padding-top:25px;    
    background:url("img/tr5_bg.png");    
    overflow:hidden;    
    float:left;
}

/* HTML */
<div id="div1">
          
    <div class="div2">

                                                        
        <div class="mins_block"></div>
        <div class="mins_block"></div>
        <div class="mins_block"></div>


    </div> 
    
</div>

<div id="btn1> << </div> 
<div id="btn2> >> </div> 

La idea es que con cada clic se desplace la misma cantidad bien hacia la izquierda o bien hacia la derecha, y ahí precisamente es donde me surge el problema, ya que no logro controlar estas acciones...

Please, cualquier aporte es bienvenido!!

Gracias y un saludo!