中心3的div製作幻燈片

Question

我使用Twitter的引導，我想提出幾點圖像的幻燈片顯示：

我已成功地顯示出我使用此代碼需要在模式DIV圖像：

<div id="imgContainer" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"> 
    <div id="stanga" style="height:100%;"> 
    <img src="./img/stanga.png" style="padding-top:50%;position:absolute;"> 
    </div> 
    <div id="pozica"> 
    <img src="./lucrari/BRD1.png"> 
    </div> 
    <div id="dreapta" style="float:right;"> 
    <img src="./img/dreapta.png"> 
    </div> 
</div> 

結果我得到的是這樣的：

我怎麼能achive這樣的事情？我的意思是中心的主要照片和左右按鈕？

Answer 1

使用的上一頁和下一個箭頭的絕對位置應該做的伎倆

here is an example

CSS：

#stanga img{ 
margin : 30px; 
} 

#pozica,#dreapta{ 
    position: absolute; 
    top: 110px 
} 

#dreapta{ 
    right: 5px; 
} 
#pozica{ 
    left: 5px; 
} 

Answer 2

嘗試，你改變背景每次（CSS關鍵幀）一個CSS3動畫。 JQuery也有解決方案來創建幻燈片。

Answer 3

CSS代碼：

.modal hide fade in{ 
position:relative; 
} 
#stanga , #pozica , #dreapta{ 
position:absolute; 
left:50%; 
right:50%; 
top:50%; 
bottom:50%; 
} 

下一次和上一個按鈕喲可以使用：

#nxt{ 
float:right; 
z-index:100 
} 
#prv{ 
float:left; 
z-index:100 
}