Есть код (кидаю без JS) слайдера, в котором 4 изображения наложены друг на друга свойством position: absolute относительно родительского элемента div.slider с position:relative.
Вопрос:
1. Как сделать высоту div.slider равную высоту картинок в слайдере?
2. Как выровнять кнопки ВПЕРЕД и НАЗАД по средине высоты картинок (с учетом изменения ширины и высоты окна просмотра)?
<body>
<div class="container">
<div class="row" id="gallery">
<div class="col-sm-1 col-md-1 col-lg-1 left-button buttons">
<input type="button" value="НАЗАД" class='prev'/>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 photoes">
<div class="slider">
<img src="url" class="showed">
<img src="url">
<img src="url">
<img src="url">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 right-button buttons">
<input type="button" value="ВПЕРЕД" class="next"/>
</div>
</div>
</div>
</body>
CSS:
#gallery {
margin: 0 auto;
padding: 0;
height: 100%;
}
#gallery .buttons
{
position: relative;
height: 100%;
display: block;
}
.col-sm-10, .col-md-10, .col-lg-10, .photoes {
margin: 0;
height: 100%;
display: block;
}
.slider {
width: 100%;
position: relative;
height: 100%;
display: block;
}
#gallery .photos .slider img{
width: 100%;
position: absolute;
left: 0;
opacity: 0;
transition: opacity 2s;
}
#gallery .photos img.showed {
opacity: 1;
}
.prev {
position: absolute;
left:0;
top: 20%;
border: 1px solid red;
margin: 0;
padding: 0;
}
.next {
position: absolute;
right: 0;
top: 20%;
border: 1px solid red;
margin: 0;
padding: 0;
}
Подскажите, пожалуйста
