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

我正在处理一个滑块，我有一个css定位问题。我的目标是获得类似的东西：

.... 到现在为止，我得到了： ... 这并不坏，但主容器“滑块”越来越大。这是因为对于每一个新的照片层，我在边距中添加2个容器，并从中执行“边距左：（+/-）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>

---

你需要边距做什么？问题是我不需要边距，所以我的定位方法是错误的，因为照片越多，边距就越大，这就是为什么我要求使用替代方法使用绝对定位并将父div的位置设置为相对：）？

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