关于制作带有垂直溢出图像的响应式 jquery 轮播的建议

我正在从下面显示的html结构制作轮播。 实际上大约有 40 张图像。

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

• 容器"轮播"垂直溢出而不是水平溢出。 这是因为 .pris 向左浮动。 我不认为这是我可以轻松更改的东西，因为它会破坏响应式设计并导致我需要支持的早期版本的 IE 的噩梦。

• 我可以计算轮播的 img 可以在父容器中显示多少个。 最大值为 4，最小值为 1。

• 我需要以这种方式循环浏览图像，即一个接一个。 左右图像适当地移入和移出容器。

我该怎么做，因为第一个类总是在容器的左上角，所以当它被隐藏/显示时，它将始终出现在该区域，而不是像较低级别的div 那样水平穿过容器。

简而言之，当图像不是在一条长长的、1 张图片高的水平线中时，如何制作轮播？

编辑 - 我不知道为什么人们要求关闭这个问题。 很明显：是否可以从垂直堆叠而不是像轮播通常那样水平堆叠的图像div 制作轮播。

编辑（一些测试代码），这在循环时工作正常，但当它回到开始时就不行了。

右箭头：

$('#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;
    }
}