Advice on making a responsive jquery carousel with images overflowing vertically

Question

I'm making a carousel from the html structure shown below. There are actually about 40 images.

<div id="carousel">
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
</div>

• The container 'carousel' overflows vertically not horizontally. This is because the .pris are floated left. I don't think this is something I can easily change as it would break the responsive design and cause nightmares with early versions of IE which I need to support.

• I can calulate how many img's of the carousel can be shown in the parent container. The maximum is 4, the minimum is 1.

• I need to cycle through the images in this kind of fashion, ie one by one. With the images to the left and right moving into and out of the container appropriately.

How can I do this, given that the first class is always in the top left of the container so when it is hidden/shown it will always appear in that area rather than passing through the container horizontally as the divs in the lower levels do.

In short, how to make a carousel when images aren't container in a long, 1 image high, horizontal line?

Edit - I don't know why people are asking to close this question. It's quite clear: is it possible to make a carousel from a div of images which are stacked vertically and not horizontally as is usually the case with carousels.

Edit (some test code) which works ok when cycling through but not when it comes back to the beginnig.

The right arrow:

$('#arrow_right a').click(function(e) {
var current = $('#pris').find('div.current');
var next = (current.next('.pris').length) ? current.next('.pris') :  $("div.pris:first");
current.removeClass('current');
current.hide();
next.addClass('current');
next.show();
show_next(getVisible());
e.preventDefault();
});

function show_next(no_visible)
{
current = $('#carousel').find('div.current');
 next_one = (current.next('.pris').length) ? current.next('.pris') : $("div.pris:first");
 next_two = (next_one.next('.pris').length) ? next_one.next('.pris') : $("div.pris:first");
 next_three = (next_two.next('.pris').length) ? next_two.next('.pris') : $("div.pris:first");

  switch(no_visible)
    {
    case 4:
    next_one.show();
    next_two.show();
    next_three.show();
    break;
    case 3:
    next_one.show();
    next_two.show();
    break;
    case 2:
    next_one.show();
    break;
    }
}

Answer 1

Yes, it's possible.
You want to animate vertically, right? Given the tip that it's about responsive design, you need to calculate on window load/+/resize the height of one image (or container height) and animate respectively your carousel scrollTop property (given the fact it's an overflow hidden element.)