<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;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.