使用jquery </li>使<li>向侧面滚动

Question

我有很长的李清单，我只展示其中的4个，其他的都是隐藏的。 所以我想要的是制作两个按钮，这样他们就可以用jquery滚动所有的li。

这是jsfiddle上的骨架应用程序，我希望有类似this的内容。 这是我的代码。

Jquery的

$(document).ready(function(){
    //When user clicks back button the slider moves to the left
    $('#back').click(function(){
        $('.listImages').animate({left: "-=10px"}, 'fast');
    });
    //When user click forward button the slider moves to the right
    $('#forward').click(function(){
       $('.listImages').animate({left: "+=10px"}, 'fast')
    });


    //When the user clicks on a tumbnail
    $('.sp').click(function(){
        //Removes the previus active class
        $('.active').removeClass('active');
        //Add the active class to the click image
        $(this).addClass('active');
        var $largeImage = $('.active').clone();
        $('.mainImage').html($largeImage)
    });
});

如何动画并将它们移动到我想要的方向？ Intead of＆＃39; .listImages＆＃39;我曾尝试过“.tumbs＆＃39;但仍然没有工作。另一个Jquery正在努力。