jQuery Horizontal Scrolling (click and animate)

Question

I have a series of divs floating to infinity in a horizontal line. I have a fixed width div container them, overflow:hidden. Ultimately, I'd like to press divs/buttons on left and right to scroll through the items (vs. using scrollbar).

I am having trouble getting .animate() to work. I want each click to move the items within the list over.

It should work similar to Amazons "Customers Who Bought This Item Also Bought" list that you can scroll through in the same manner. I was tempted to try using .mousedown and have it move while holding (similar to true scrolling) but want do this easier approach first.

Here is the fiddle and code:

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'});

    });

});

Any and all help appreciated. Thanks!

Answer 1

Add position:relative to .item, like so:

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

Working example: http://jsfiddle.net/mattblancarte/stfzy/21/

There are a few more bugs in your setup, but this should get you unstuck. :)

Edit::

Here is a quick solution to solve the bug where the list will slide too far in either direction:

$(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'});
        }
    });

});