jQuery Scorrimento orizzontale (fare clic e animare)

Question

Ho una serie di div fluttuanti all'infinito in una linea orizzontale. Ho un div larghezza fissa li contenitore, overflow: nascosto. In definitiva, mi piacerebbe premere i div/pulsanti a sinistra e a destra per scorrere tra gli elementi (vs utilizzando la barra di scorrimento).

Ho problemi a far funzionare .animate(). Voglio ogni clic per spostare gli oggetti all'interno della lista.

Dovrebbe funzionare come Amazons "Clienti che hanno acquistato questo articolo hanno anche acquistato" un elenco che è possibile scorrere nello stesso modo. Sono stato tentato di provare a usare .mousedown e farlo muovere tenendo premuto (simile allo scrolling vero) ma voglio prima questo approccio più semplice.

Ecco il violino e il codice:

http://jsfiddle.net/stfzy/16/

HTML:

<div id="container"> 
<div id="arrowL"> 
</div> 
<div id="arrowR"> 
</div> 
<div id="list-container"> 
    <div class='list'> 
     <div class='item'> 
     </div> 
     <div class='item'> 
     </div> 
     <div class='item'> 
     </div> 
     <div class="item"> 
     </div> 
    </div> 
</div> 

CSS:

#container{ 
width:340px; 
    height:50px; 
} 

#list-container { 
overflow:hidden;  
width: 300px; 
float:left;  
} 

.list{ 
    background:grey; 
min-width:700px; 
    float:left; 
} 


#arrowR{ 
background:yellow; 
    width:20px; 
    height:50px; 
    float:right; 
    cursor:pointer; 
} 


#arrowL{ 
background:yellow; 
    width:20px; 
    height:50px; 
    float:left; 
    cursor:pointer; 
} 

.item{ 
    background:green; 
width:140px; 
    height:40px; 
    margin:5px; 
    float:left; 
} 

jQuery

$(document).ready(function() { 

    $('div#arrowR').click(function(){ 

     $('div.item').animate({'left':'-=300px'}); 

    }); 

    $('div#arrowR').click(function(){ 

     $('div.item').animate({'left':'+=300px'}); 

    }); 

}); 

Qualsiasi aiuto è apprezzato. Grazie!

Answer 1

Aggiungi position:relative-.item, in questo modo:

.item{ 
    background:green; 
    width:140px; 
    height:40px; 
    margin:5px; 
    float:left; 
    position:relative; /* Put me here! */ 
} 

esempio di lavoro: http://jsfiddle.net/mattblancarte/stfzy/21/

ci sono un paio di bug nella configurazione, ma questo dovrebbe farti scollarsi. :)

Modifica ::

Qui è una soluzione rapida per risolvere il bug in cui la lista scivolerà troppo lontano in entrambe le direzioni:

$(document).ready(function() { 

    var $item = $('div.item'), //Cache your DOM selector 
     visible = 2, //Set the number of items that will be visible 
     index = 0, //Starting index 
     endIndex = ($item.length/visible) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...) 

    $('div#arrowR').click(function(){ 
     if(index < endIndex){ 
      index++; 
      $item.animate({'left':'-=300px'}); 
     } 
    }); 

    $('div#arrowL').click(function(){ 
     if(index > 0){ 
      index--;    
      $item.animate({'left':'+=300px'}); 
     } 
    }); 

});