down - jQuery Desplazamiento horizontal(hacer clic y animar)

scroll horizontal jquery

Question

Tengo una serie de divs flotando al infinito en una línea horizontal. Tengo un contenedor div de ancho fijo, desbordamiento: oculto. En última instancia, me gustaría presionar los botones / divs a la izquierda y a la derecha para desplazarse por los elementos (frente a usar la barra de desplazamiento).

Tengo problemas para que .animate () funcione. Quiero que cada clic mueva los elementos dentro de la lista.

Debería funcionar de manera similar a la lista de Amazonas "Clientes que compraron este artículo también comprado" por la que puede desplazarse de la misma manera. Estuve tentado de intentar usar .mousedown y hacer que se moviera mientras lo sostengo (similar al desplazamiento verdadero) pero quiero hacer primero este enfoque más fácil.

Aquí está el violín y el código:

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

    });

});

Cualquier y toda ayuda apreciada. ¡Gracias!

Answer 1

Agregar position:relative a .item , así:

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

Ejemplo de trabajo: http://jsfiddle.net/mattblancarte/stfzy/21/

Hay algunos errores más en su configuración, pero esto debería hacer que se despegue. :)

Editar::

Aquí hay una solución rápida para resolver el error donde la lista se deslizará demasiado en cualquier dirección:

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

});