Schieberegler in jquery, der 4 Folien gleichzeitig zeigt

Question

Ich möchte einen Schieberegler, der 4 Listenelemente gleichzeitig zeigt und mit einem Klick auf die nächste/vorherige Schaltfläche die nächste/vorherige Folie einschiebt und die Folie am anderen Ende ausfällt Achten Sie darauf, dass jedes Mal 4 Bilder angezeigt werden.

Mein 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/

Das aktuelle Arbeits Beispiel zeigt nur eine Folie und mit Klick auf nächste/vorherige Schaltfläche die neue Folie überlappt die alten vollständig.

Wie kann ich es schaffen, 4 Artikel gleichzeitig anzuzeigen?

Answer 1

Sie können nur die Leitungscode ändern, der die Größe des Maskenbehälter definiert:

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

Auf der width Wert multipliziert mit 4 oder die n Anzahl der Folien, die Sie anzeigen möchten:

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

Updated Demo