센터 3 div의 내가 트위터 부트 스트랩을 사용하고 슬라이드 쇼

Question

을하고 제가 몇 이미지의 슬라이드 쇼를 만들고 싶어 : 나는이 코드를 사용하여 모달 DIV에 필요한 이미지를 표시 관리해야

을 :

를

가 어떻게 이런 식으로 뭔가를 achive 수 있습니다 는

<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> 

내가 얻는 결과는 다음과 같은 것입니다? 메인 사진과 왼쪽 버튼을 중앙에 배치하는 것을 의미합니까?

Answer 1

트릭을한다 이전 및 다음 화살표상의 절대 위치를 사용

here is an example

,210

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 
}