スクロールは、私は自分なりにいくつかのスライダーを作りたいが、それは何かが悪いようですDIV

Question

を持つX：

私が持っている：

：

<div class="slider"> 
<div class="img first"></div> 
<div class="img second"></div> 
<div class="img third"></div> 
</div> 

.slider{width: 100%; max-height: 100%; overflow: hidden;} 
//I don't want to see scrolls 
.img{width: 100%; height: 100%; float: left;} 
.first{background: red;} 
.second{background: blue;} 
.third{background: green;} 

は基本的に私が欲しいもの、これを持っていることです

100%  100% 100% 
+-------+--------+-------+ 
+-------+ 
| 100% | 
|first | second third 
+-------+ 
+------------------------+ 

問題は私のdivsが別のものの下に行くということです。浮動小数点に問題はありますか？

Answer 1

スライダーの各スライドが画像になるように、あなたのコードが私に上に説明しているところから見えます。

コードスニペット：もしそうなら、私は下に次のコードをあなたのスライダーを変更することをお勧めします

.slider { 
 
    width: 100%; 
 
    max-width: 960px; 
 
    overflow: hidden; 
 
} 
 

 
.slider figure img { 
 
    width: 25%; 
 
    float: left; 
 
    height: auto; 
 
} 
 

 
.slider figure { 
 
    width: 400%; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    animation: 10s slide infinite; 
 
    -webkit-animation: 10s slide infinite; 
 
} 
 

 
@-webkit-keyframes slide { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    16% { 
 
    left: 0%; 
 
    } 
 
    33% { 
 
    left: -100%; 
 
    } 
 
    49% { 
 
    left: -100%; 
 
    } 
 
    66% { 
 
    left: -200%; 
 
    } 
 
    82% { 
 
    left: -200%; 
 
    } 
 
    100% { 
 
    left: -300%; 
 
    } 
 
}

<div class="slider"> 
 
    <figure> 
 
    <img src="https://i.ytimg.com/vi/mxbzT3uYXxE/maxresdefault.jpg"> 
 
    <img src="http://cdn.playbuzz.com/cdn/1af8dfed-eacb-4228-8219-8781715daa2d/115aad8d-8eee-45e4-b439-450602e843fd.jpg"> 
 
    <img src="http://www.majorspoilers.com/wp-content/uploads/2011/08/MSC6.jpg"> 
 
    <img src="http://static.srcdn.com/wp-content/uploads/franklin-richards.jpg"> 
 
    </figure> 
 
</div>

のではなく、特定のDIVあなたimgクラスを呼び出すたびに持つ、我々はできます代わりに実際のimgタグを使用してください。それに加えて、私はkeyframes cssを使ってスライド画像の位置を制御しました。

は、あなたが本当にdivコンテンツでこれをコントロールしたいなら、あなたは単にあなたのdiv内の画像をラップし、他の種類のコンテンツが含まれるように.slider figure divにクラス.slider figure imgを変更することができます。

私はこれがあなたの努力に役立つことを願っています。