Javascript 使用无限选项向左滑动div

我创建了一个包含4个图像的迷你幻灯片：

但是div超过了容器的限制，因此只显示了2个div而不是4个div。我还需要使这个迷你滑块无限大，有人可以告诉我怎么做

看看我的代码：

HTML：

<div id="right_curriculum_container">
<div class="left_arroq"><img src="img/1_c_left_arrow.png" id="left_arrow" width="26" height="26" alt="Previous" title="Previous"></div>
<div id="image_container">

<div class="center_image"></div>
<div class="center_image"></div>

<div class="center_image"></div>
<div class="center_image"></div>

</div>
<div class="left_arroq"><img src="img/1_c_right_arrow.png" id="right_arrow" width="26" height="26" alt="Next" title="Next"></div>  
</div>

JS:

.left_arroq {
    width: 40px;
    height: 40px;
    float: left;
    padding-top: 110px;
    padding-bottom: 100px;  
}
#right_arrow {
    text-align: center;
    display: block;
    margin-left: 8px;
    cursor: pointer;
}
#left_arrow {
    text-align: center;
    display: block;
    margin-left: 13px;
    cursor: pointer;
}
#image_container {
    height: 250px;
    width: 350px;
    margin-right: auto;
    margin-left: auto;
    float: left;
    overflow:hidden;
    display: block;
    position: relative;
}
.center_image {
    height: 235px;
    width: 163px;
    background-color: #606060;
    float: left;
    margin-left: 8px;
    border: 2px solid #7ACBBF;
    margin-top: 6px;
    position: relative;
}

$(document).ready(function() {
   $('#left_arrow').click(function() {
$('.center_image').animate({
left : "-350px" //moves left
});
   });

    $('#right_arrow').click(function() {
$('.center_image').animate({
left : "0px" //moves right
});
     });

});

---

对于2张图像和4张图像，您的

#image_容器的宽度设置为350px。。。其中，单个图像的宽度分别设置为163px。所以你至少需要163*4。将其设置为700px就可以了

#image_container 
{
    height: 250px;
    width: 700px;
    margin-right: auto;
    margin-left: auto;
    float: left;
    overflow:hidden;
    display: block;
    position: relative;
}

谢谢Maverick，但这段代码显示所有div，每次单击只需显示2个div，如果我将容器宽度设置为700px，这将破坏我的布局。是否有任何解决方案一次只显示2个div，而不破坏需要350px的布局？谢谢我解决了一个中断布局问题，添加了一个新的容器（div）来包装all:JSFiddle:。但现在我想让这个滑块无限大。有什么帮助吗？