在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