同じ行で、それぞれ100％のフレックス画像

Question

私は3つのdivを持つコンテナを内部にオーバーフローで隠しています。この容器の幅と高さは100％で350pxです。 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>