JQuery Horizontales Scrollen (klicken und animieren)

Question

Ich habe eine Serie von Divs, die in einer horizontalen Linie unendlich schweben. Ich habe einen festen Breite-Div-Container, der overflow:hidden hat. Letztendlich möchte ich Divs/Buttons links und rechts drücken, um durch die Elemente zu scrollen (anstatt die Scrollleiste zu verwenden).

Ich habe Probleme, .animate() zum Laufen zu bringen. Ich möchte, dass jeder Klick die Elemente innerhalb der Liste verschiebt.

Es sollte ähnlich funktionieren wie die Liste "Kunden, die diesen Artikel gekauft haben, kauften auch" von Amazon, durch die man auf ähnliche Weise scrollen kann. Ich war versucht, .mousedown zu verwenden und sie zu bewegen, während ich gedrückt halte (ähnlich dem echten Scrollen), aber möchte zuerst diesen einfacheren Ansatz versuchen.

Hier ist der Fiddle und der Code:

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

HTML:

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

    });

});

Alle Hilfe wird geschätzt. Vielen Dank!

Answer 1

Fügen Sie position:relative zu .item hinzu, wie folgt:

.item{
    background:green;
    width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative; /* Setze mich hier rein! */
}

Arbeitsbeispiel: http://jsfiddle.net/mattblancarte/stfzy/21/

Es gibt noch ein paar weitere Fehler in Ihrem Setup, aber das sollte Sie wieder in Gang bringen. :)

Bearbeitung:

Hier ist eine schnelle Lösung, um den Fehler zu beheben, bei dem die Liste in die eine oder andere Richtung zu weit gleiten würde:

$(document).ready(function() {

    var $item = $('div.item'), //Cachen Sie Ihren DOM-Selektor
        sichtbar = 2, //Setzen Sie die Anzahl der sichtbaren Elemente fest
        index = 0, //Startindex
        endIndex = ( $item.length / sichtbar ) - 1; //Endindex (Hinweis: Erfordert, dass sichtbar ein Faktor von $item.length ist... Sie können dies verbessern, indem Sie abrunden...)

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

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

});