jquery中的滑块同时显示4个幻灯片

Question

我想要一个滑块，同时显示4个列表项，单击下一个/上一个按钮，下一个/上一个幻灯片滑入，另一端的幻灯片退出qeue，这样每次显示4个图像

我的HTML：

<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
    <li>SLIDE 5</li>
    <li style="background: #aaa;">SLIDE 6</li>
    <li>SLIDE 7</li>
    <li style="background: #aaa;">SLIDE 8</li>
  </ul>  
</div>

http://jsfiddle.net/mCze7/115/

当前的工作示例只显示了一张幻灯片，点击了下一张/上一页按钮，新幻灯片完全重叠了旧幻灯片。

如何设法同时显示4个项目？

Answer 1

您只需更改定义蒙版容器大小的线代码：

$('#slider').css({ width: slideWidth, height: slideHeight });

在width值乘以4或您要显示的n张幻灯片数量：

$('#slider').css({ width: slideWidth*4, height: slideHeight });

Updated Demo