カスタムスライダを水平方向に切り替える方法は？

Question

スライダを水平方向に切り替える必要があります。現在、私は垂直スクロールでスライダを達成しました。私はそれを水平にスクロールする必要がありますか？

これは私が試したものです：

のjQuery：

$(document).ready(function() { 

    $('#list li:lt(8)').show(); 

    $('#next').click(function() { 
    $('#prev').show(); 
    var last = $('#list').children('li:visible:last'); 
    last.nextAll('#list li:lt(8)').toggle(200); 
    last.next().prevAll('#list li').hide(200); 

    var $this = $(this); 
    if ($('#list li').last().is(':visible')){ 
     $this.hide(); 
    } 
    }); 

    $('#prev').click(function() { 
    $('#next').show(); 
    var first = $('#list').children('li:visible:first'); 
    first.prevAll('#list li:lt(8)').toggle(200); 
    first.prev().nextAll('#list li').hide(200) 

    var $this = $(this); 
    if ($('#list li').first().is(':visible')){ 
     $this.hide(); 
    } 
    }); 

}); 

フィドル例：

Demo

Answer 1

あなたのフィドルは、あなたが説明するように動作しますが、あなたはのいずれかを変更する場合にのみ、スタイル：

#list{ 
    overflow: hidden; 
    max-height: 300px; 
} 

リストの高さを制限しています。つまり、一度に8個のアイテムを表示することはできません。高さを上げることで、より多くの情報を表示することができます。