동일한 행이지만 각 100 %의 플렉스 이미지

Question

오버플로가있는 이미지가있는 3 개의 div가있는 컨테이너가 있습니다. 숨김; 이 컨테이너의 너비와 높이는 350px의 100 %입니다. 배경 이미지가있는 3 div 안에 있습니다. 각 div는 컨테이너와 너비가 같고 높이가 100 %입니다. 첫 번째 div의 오른쪽에 모두 정렬되었으므로 애니메이션을 만들고 슬라이더를 만들려고합니다. 각 div에 대한 간단한 bg 이미지 + 텍스트 슬라이더.

내 실제 코드 :

HTML

<div id="container"> 
    <div id="banner1"> 
     <h3 class="bannerText">Text1</h3> 
    </div> 

    <div id="banner2"> 
     <h3 class="bannerText">Text1</h3> 
    </div> 

    <div id="banner3"> 
     <h3 class="bannerText">Text1</h3> 
    </div> 
</div> 

CSS

이

#container { 
width: 100%; 
height: 350px; 
position: relative; 
overflow: hidden; 
display: inline-block; 
} 

#banner1 { 
width: 100%; 
height: 350px; 
background-image: url("../images/banner1.jpg"); 
background-color: red; 
background-size: cover; 
background-position: center center; 
position: relative; 
float: left; 
animation: slide 10s ease-in-out infinite; 
} 

#banner2 { 
width: 100%; 
height: 350px; 
background-image: url("../images/banner2.jpg"); 
background-color: fuchsia; 
background-size: cover; 
background-position: center center; 
position: relative; 
float: left; 
} 

#banner3 { 
width: 100%; 
height: 350px; 
background-image: url("../images/banner3.jpg"); 
background-color: green; 
background-size: cover; 
background-position: center center; 
position: relative; 
float: left; 
} 

bannerText { 
color: #fff; 
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
-moz-transform: translateY(-50%); 
} 

@keyframes slide{ 
10%{ 
transform:translateX(0); 
} 
15%, 30%{ 
transform:translateX(-100%); 
} 
35%, 50%{ 
transform:translateX(-200%); 
} 
55%, 70%{ 
transform:translateX(-300%); 
} 
75%, 90%{ 
transform:translateX(0); 
} 

} 

누군가가이 문제를 해결하는 데 도움이 수 있습니까? 또한 iphone에서 작동해야합니다.

Answer 1

슬라이드 쇼 란 무엇입니까? 아마이

https://codepen.io/dudleystorey/pen/ehKpi

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> 
<div id="slider"> 
<figure> 
<img src="austin-fireworks.jpg" alt> 
<img src="taj-mahal_copy.jpg" alt> 
<img src="ibiza.jpg" alt> 
<img src="ankor-wat.jpg" alt> 
<img src="austin-fireworks.jpg" alt> 
</figure>