При условии что элементов больше 3 должно появится слайдер
При клике на кнопку "+" добавляется элемент, как сделать так чтобы если элементов больше 3 то остальные элементы появились на другой странице слайдера. Я написал так (grid-template-rows:1fr 1fr 1fr) но не сработало, есть идеи как сделать это?
плюс нужно чтобы при клике на стрелок слайдер сработало. я это тоже написал чтобы при клике они стали margin-left:-300px; но не сработало тоже
document.querySelector(".btn").onclick = ()=>{
let x = document.createElement("div")
x.classList.add("item")
document.querySelector(".content").appendChild(x)
let y = document.querySelectorAll(".item")
if(y.length>3){
document.querySelector(".next").style.display = "block"
document.querySelector(".prev").style.display = "block"
}
}*{
margin:0;
padding:0;
box-sizing:border-box;
}
.container{
width: 600px;
height: 400px;
background-color: blanchedalmond;
}
.content{
border:1px solid black;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
transition: 0.5s;
position: relative;
}
.item{
position: relative;
width:300px;
height:50px;
background-color: cornflowerblue;
border:1px solid black;
}
.next{
width:50px;
border:1px solid black;
height:20px;
background-color: gold;
display: none;
}
.prev{
width:50px;
height:20px;
display: none;
border:1px solid black;
background-color: gold;
}
<div class="container">
<div class="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="next">></div>
<div class="prev"><</div>
<button class = "btn">Добавить +1 элемент</button>
</div>