StandardNerd StandardNerd - 4 months ago 6x
jQuery Question

slider in jquery that shows 4 slides concurrently

I want a slider, that shows 4 list items concurrently and with click on the next/previous button the next/previous slide slides-in and the slide on the other end drops out of the qeue so that everytime 4 images are shown.


<div id="slider">
<a href="#" class="control_next">>></a>
<a href="#" class="control_prev"><</a>
<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>

The current working example shows only one slide and with click on next/prev button the new slide overlaps the old one completely.

How can i manage to show 4 items concurrently?


You can change just the linecode that defines the size of the mask container:

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

On the width value multiply by 4 or the n number of slides you want to show:

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

Updated Demo