Расположил дочерние элементы flex-родителя, друг под другом. Для этого задал всем абсолютное позиционирование, а одному из детей - position:relative
. И в связи с этим появилась проблема - размеры детей, не совпадают. Тот который позиционирован относительно - имеет ожидаемые размеры. А те, которые абсолютно - нет: они больше.
Как сделать так, чтобы абсолютно позиционированные элементы были такого же размера как и относительно позиционированный?
document.addEventListener("DOMContentLoaded", startSlider);
var arrImg = [],
controlInterval,
show = 0;
function startSlider (){
var children = document.getElementById("wrap").children;
for (var i=0; i<children.length; i++){
if (children[i].tagName == "DIV"){
arrImg.push(children[i]);
} else if (children[i].tagName == "P"){
children[i].addEventListener("click", changeImg);
}
}
}
function changeImg(event){
var target = event.target;
var t = arrImg.length;
if (target.className == "prev"){
if(show == 0){
arrImg[t-1].className = "show";
arrImg[show].className = "hide";
show = t-1;
} else{
arrImg[show-1].className = "show";
arrImg[show].className = "hide";
show--;
}
} else if (target.className == "next"){
console.log("work");
if(show == t-1){
arrImg[0].className = "show";
arrImg[show].className = "hide";
show = 0;
} else{
arrImg[show+1].className = "show";
arrImg[show].className = "hide";
show++;
}
}
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#wrap {
position: relative;
border: 1px solid red;
display: flex;
justify-content: space-between;
width: 40%;
height: 40%;
padding: 10px;
}
#wrap div{
border: 1px solid;
width: 100%;
height: 100%;
position: absolute;
transition: 1s;
}
#wrap div:first-child{
position: relative;
}
/*дальше идет оформительский код не влияющий на проблему*/
#wrap div:nth-child(2){
background-color: red;
}
#wrap div:nth-child(3){
background-color: yellow;
}
.prev, .next{
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
top: 45%;
border: 1px solid;
text-align: center;
font-size: 20px;
}
.next{
right: 0px;
}
.show{
opacity: 0.6;
}
.hide{
opacity: 0;
}
<div id="wrap">
<div class="show">1</div>
<div class="hide">2</div>
<div class="hide">3</div>
<p class="prev">←</p>
<p class="next">→</p>
</div>
Чтобы увидеть "баг" - переключите слайдер.
А глобальный вопрос: почему размеры элементов, в данном случае, считаются по разному? Ведь во всех учебных пособиях сказано, что: "при использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента" https://webref.ru/css/width
П.С.: в реальности у меня нет height
для обертки слайдера ("wrap"). Высота определяется браузером автоматически - для соблюдения пропорций картинки. И когда я все позиционирую абсолютно - обертка схлопывается. А мне нужен бордер.
height
, что-бы было понятно – Air 16 фев '18 в 6:45height
нет уwrap
? – Air 16 фев '18 в 6:46