<div class="block-container">
<div class="block block_1 block--active">1</div>
<div class="block block_2">2</div>
<div class="block block_3">3</div>
<div class="block block_4">4</div>
<div class="block block_5">5</div>
</div>
<button class="back">Назад</button>
<button class="next">Далее</button>
.block-container {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.block {
width: 200px;
height: 100px;
background: gray;
}
.block--active {
background: red;
}
const blocks = document.querySelectorAll(".block");
var indx = 0;
document.querySelector(".next").addEventListener("click", (e) => {
indx = indx >= blocks.length - 1 && blocks.length - 1 || ++indx;
indx <= blocks.length - 1 && blocks[indx].classList.add("block--active");
});
document.querySelector(".back").addEventListener("click", (e) => {
if (!!~indx)
indx = blocks[indx].classList.remove("block--active") && indx < 1 && -1 || --indx;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.