Question

我创建了一张包含4张图片的迷你幻灯片：JSFiddle。

但是div正在打破容器限制，因此只显示2个div而不是4个。另外我需要让这个迷你滑块无限，有人可以告诉我该怎么办？

看看我的代码：

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>

CSS：

.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;
}

JS：

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

});

Answer 1

对于2个图像与4个图像，#image_container的宽度设置为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;
}

向左滑动div有无限选项

1 个答案:

See workfing jsFiddle demo