<section class="container">
      <div class="box">GH</div>
      <div class="box">IJ</div>
      <div class="box">KL</div>
      <div class="box">MN</div>
      <div class="box">OP</div>
      <div class="box">QR</div>
    </section>
    <button class="prev">Prev</button>
    <button class="next">Next</button>

.container {
  display: flex;  
  width: 100%; 
  overflow: hidden;
  border: 1px solid black;
}
.box {
  min-width: 100%; 
  text-align: center;
  background-color: brown;
  transition: transform 0.5s ease;/
}

const boxes = document.querySelectorAll(".box");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
const arrLength = boxes.length - 1;

let c = 0;

prevBtn.addEventListener("click", () => updatefnPrev());
nextBtn.addEventListener("click", () => updatefnNext());
function updatefnNext() {
  if (c > arrLength - 1) return;

  c = c++;

  boxes.forEach((box) => {
    box.style.transform = `translateX(-${c * box.offsetWidth}px)`;
  });
}
function updatefnPrev() {
  if (c == 0) return;
  c--;

  boxes.forEach((box) => {
    box.style.transform = `translateX(-${c * box.offsetWidth}px)`;
  });
}