如何水平切换自定义滑块？

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

您正在限制列表的高度，这意味着它不能同时显示八个项目。增加高度可以显示更多空间。