CSS定位案例，需要一些建议

Question

我正在使用滑块，我遇到了css定位问题。我的目标是获得类似的东西：

....直到现在我得到了这个： ......这还不错，但主要容器“滑块”越来越大。这是因为对于每一个新的照片层，我在边缘添加了2个容器，从中我正在做“margin-left：（+/-）X px;”将图片从添加的div容器中放置得更靠近中心我可以实现哪种替代方法，这样当我添加更多图层（边距中的图片更多）时，主容器“滑块”不会变大？

以下是HTML代码：

<div id='slider'>
<div id='leftDoi'><img  id="thirdLvlLeft"src="fulls/1.jpg"></div>
<div id='left'><img  id="secondLvlLeft"src="fulls/2.jpg"></div>
<div id='center'><img id="centerimg"src="fulls/3.jpg"></div>
<div id='right'><img id="secondLvlRight"src="fulls/4.jpg"></div>
<div id='rightDoi'><img id="thirdLvlRight"src="fulls/5.jpg"></div>
</div>

这是CSS代码：

#leftDoi{
    height: 190px;
    width: 240px;
    float: left;
    /*background-color: red;*/
}
#rightDoi{
    height: 190px;
    width: 240px;
    float: left;
    /*background-color: red;*/
}
#left{
    height: 190px;
    width: 240px;
    float: left;
    /*background-color: red;*/
}

#right{
    height: 190px;
    width: 240px;
    float: left;
    /*background-color: red;*/
}

#center{
    height: 376px;
    width: 448px;
    float: left;
    /*background-color: yellow;*/

}

#slider{
    height: 416px;
    width: 1408px;
    margin: 0 auto;
    background-color: #FFFFFF;
}
body{
    background-color: #c0c0c0;
}

#thirdLvlLeft{
    position: absolute;
    margin-left: 200px;
    opacity: 0.5;
    width: 240px;
    height: 190px;
    z-index:0;
}

#thirdLvlRight{
    position: absolute;
    margin-left: -200px;
    opacity: 0.5;
    width: 240px;
    height: 190px;
    z-index:0;
}
#secondLvlLeft{
    position: absolute;
    margin-top: 40px;
    margin-left: 80px;
    opacity: 0.7;
    width: 240px;
    height: 190px;
    z-index:1;
}

#secondLvlRight{
    position: absolute;
    margin-top: 40px;
    margin-left: -80px;
    opacity: 0.7;
    width: 240px;
    height: 190px;
    z-index:1;
}

#centerimg{
    position: absolute;
    margin-top: 80px;
    z-index:2;
    width: 448px;
    height: 336px;
}