У меня есть серия div, плавающих в бесконечность по горизонтали. У меня есть контейнер div фиксированной ширины, переполнение: скрытое. В конечном счете, я хотел бы нажимать кнопки div / слева и справа для прокрутки элементов (вместо использования полосы прокрутки).

У меня проблемы с получением .animate () для работы. Я хочу, чтобы каждый щелчок переместил элементы в списке.

Он должен работать аналогично списку Amazons «Клиенты, которые купили этот товар, также купленный», который вы можете просмотреть таким же образом. У меня возникло желание попробовать использовать .mousedown и заставить его двигаться во время удержания (похоже на настоящую прокрутку), но сначала я хочу сделать этот более простой подход.

Вот скрипка и код:

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

    });

});

Любая помощь приветствуется. Спасибо!