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

Question

我想要一个滑块，它同时显示4个列表项并单击下一个/上一个按钮时，下一个/上一个幻灯片幻灯片放入，另一端的幻灯片将退出queue，每次显示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