div要素に画像をスライド

Question

3つの画像を1つずつスライドさせたいときは、左側から赤いdivに簡単に移動したいと思います。画像がdivにない場合は、表示されないようにしてください。

これは私が達成したいと思っている開始と終わりの結果です。赤い四角形は親のdivで、黒い四角形はスライドしたい画像です。

どのようにこの問題に取り組んでいますか？

HTML: 

<div id="container"> 
<img src="black"><img src="black"><img src="black"> 
</div> 

CSS: 

#container { 
width:380px; 
height: 200px; 
background-color:red; 

} 
img{ 
    width:30px; 
    height: 50px; 
} 

Answer 1

これは非常に粗製の一例ですが、私は正しい方向にあなたを指すように迅速なデモをノックしたかったです。これをさらに発展させる必要があるでしょうが、始めるのは難しいかもしれません。

フィドル：https://jsfiddle.net/ed034mrs/

あなたはCSSアニメーションでこれを行うことができ、すべてでJavascriptを必要としません。アニメーションは左からシンプルなスライドですが、私は遅れてアイテムをずらしました。

HTML：

<div class="outer"> 
    <div class="inner"> 
    <img src="" alt=""> 
    </div> 

    <div class="inner"> 
    <img src="" alt=""> 
    </div> 

    <div class="inner"> 
    <img src="" alt=""> 
    </div> 
</div> 

CSS：

@-webkit-keyframes slide-in { 
    0% { 
    transform: translateX(-100%); 
    } 
    100% { 
    transform: translateX(0); 
    } 
} 

.outer { 
    width: 380px; 
    height: 200px; 
    background-color: red; 
    overflow: hidden; 
} 

.inner { 
    width: 33.33%; 
    height: 100%; 
    float: left; 
    position: relative; 
    display: block; 
    transform: translateX(-1000%); 
    -webkit-animation: slide-in 1s forwards; 
} 

.inner:nth-child(1) { 
    -webkit-animation-delay: 2s; 
} 

.inner:nth-child(2) { 
    -webkit-animation-delay: 1s; 
} 

img { 
    width: 30px; 
    height: 50px; 
    background-color: black; 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -25px; 
    margin-left: -15px; 
} 

Answer 2

あなたが最初のウィンドウから画像を削除して使用することで、1枚の画像で画像1にスライドさ余白にanimateを使用するために、大きな負margin-leftを設定することができます各画像の遅延とインデックス。

$('img').css('margin-left', '-200vw') 
 

 
$('img').each(function(i) { 
 
    $(this).delay(i * 500).animate({ 
 
    'margin-left': 25 
 
    }, 1000) 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 
body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content { 
 
    background: gray; 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.red { 
 
    background: #B53535; 
 
    width: 400px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="red"> 
 
    <img src="http://placehold.it/100x100"> 
 
    <img src="http://placehold.it/100x100"> 
 
    <img src="http://placehold.it/100x100"> 
 
    </div> 
 
</div>

ので、これはここでDEMO

Answer 3

起こるが、私の試み、かなり厄介TBHですが、私は願ってあなただけjustify-content: space-aroundを設定できますが、私はjsのはフレキシボックスに影響を推測する場合、それははるかに容易にされるだろうそれはあなたにアプローチするためのいくつかのオプションを提供します。

ブラックボックスをコンテナの外側に置き、オーバーフローを隠してコンテナの外側に見えないように設定しました。その後、CSSで、コンテナが握られているときに、最初、2番目、3番目の画像を右に移動します。

第2および第3の画像にも遷移遅延があります。トランジションの長さはimgセレクタで見られるようにわずか1秒であるため、一度に1つずつ表示されます。

.greyBackground { 
 
background-color: grey; 
 
} 
 

 
#container { 
 
margin:auto; 
 
position: relative; 
 
width:380px; 
 
height: 200px; 
 
background-color:#B53535; 
 
overflow: hidden; 
 
} 
 

 
img{ 
 
position: relative; 
 
display:inline-block; 
 
background-color: black; 
 
width:70px; 
 
height: 90px; 
 
top:40px; 
 
right: 220px; 
 
transition: right 1s ease-out; 
 
-webkit-transition: right 1s ease-out; 
 
-moz-transition: right 1s ease-out; 
 
-o-transition: right 1s ease-out; 
 
} 
 

 
#container:hover > img:nth-of-type(1) { 
 
right: -20px; 
 
} 
 

 
#container:hover > img:nth-of-type(2) { 
 
right: -80px;; 
 
transition-delay: 1s; 
 
} 
 

 
#container:hover > img:nth-of-type(3) { 
 
right: -140px; 
 
transition-delay: 2s; 
 
}

<div class="greyBackground"> 
 
<div id="container"> 
 
    <img src=""> 
 
    <img src=""> 
 
    <img src=""> 
 
</div> 
 
</div>