Выровняйте три изображения бок о бок в div, покажите одно изображение за раз и спрячьте два

Question

Вот мое требование. У меня есть три изображения, которые должны быть выровнены бок о бок. Когда я уменьшаю маржу слева, все три изображения должны быть скрыты один за другим в очереди.

И вот моя настоящая проблема. Когда я увеличиваю маржу слева, все изображения должны перейти в прямую скрытую часть в очереди. Но для меня они спускаются.

Мой HTML,

<div class="content"> 
    <div class="images"> 
     <img id="left-img" src="img/trees.png"> 
     <img id="center-img" src="img/buildings.png"> 
     <img id="right-img" src="img/interior.png"> 
    </div> 
</div> 

Мой CSS,

.content 
{ 
    width : 100%; 
    overflow : hidden; 
} 
.images 
{ 
    width : 80%; 
    margin-left : auto; 
    margin-right : auto; 
    height : 550px; 
    overflow : hidden; 
} 
.images-slider img 
{ 
    width: 60%; 
    display : inline-block; 
    float : left; 
} 

А потом когда я уменьшить запас налево к крайнему левому изображению, все изображения должны быть выровнены, как это.

и точно так же, когда я увеличить запас слева, все изображения должны идти прямо, как это (не происходит).

Вместо всего изображения идут вниз к DIV, когда я увеличить запас слева. Я использовал position : inline;, position : inline-block;, float: left;. Но для меня ничего не работает. Где я иду не так? Пожалуйста, помогите мне.

Answer 1

Если я вас правильно понимаю, вы можете добиться этого в том, как показано ниже:

section.images { 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
section.images figure { 
 
    display: flex; 
 
} 
 

 
section.images figure img { 
 
    flex: 1 0 auto; 
 
} 
 

 
/* Update the left property to change which img is shown */ 
 
section.images figure { 
 
    position: relative; 
 
    left: -100px; 
 
} 
 

 

 

 

 
/* --------------------------------- 
 
    Demo use only 
 
--------------------------------- */ 
 

 
* { margin:0; padding:0 } 
 

 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 

 
img:nth-child(1) { background:gold } 
 
img:nth-child(2) { background:dodgerblue } 
 
img:nth-child(3) { background:orangered }

<section class="images"> 
 
    <figure> 
 
    <img src="img/trees.png"> 
 
    <img src="img/buildings.png"> 
 
    <img src="img/interior.png"> 
 
    <figure> 
 
</section>

возможно изм Демо: http://jsbin.com/fiwajoxixi

Answer 2

Я бы рекомендовал вставить в него некоторый jQuery, чтобы было проще.

Я настоятельно рекомендую Unslider http://unslider.com