<button id="prev">PREV</button>
<button id="next">NEXT</button>

<div class="dots">
  <div class="dot active">1</div>
  <div class="dot">2</div>
  <div class="dot">3</div>
  <div class="dot">4</div>
  <div class="dot">5</div>
  <div class="dot">6</div>
  <div class="dot">7</div>
  <div class="dot">8</div>
  <div class="dot">9</div>
  <div class="dot">10</div>
  <div class="dot">11</div>
</div>

.dots {
  border: 2px solid;
  margin: 2rem auto;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  width: 16rem;
}

.dot {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background: #ddd;
  border-radius: 100px;
  flex-shrink: 0;
}
.dot.active {
  background: red;
  color: white;
}
.dot.hidden {
  display: none;
}

const dotContainer = document.querySelector(".dots");
const total = [...dotContainer.querySelectorAll(".dot")].length;
const visible = 7;
const sideVisible = Math.floor(visible / 2);
let index = 0;

function update(slideIndex) {
  [...dotContainer.querySelectorAll(".dot")].forEach(function (dot, index) {
    dot.classList.toggle("active", index === slideIndex);
    let start = slideIndex > sideVisible ? slideIndex - sideVisible : 0;
    let end = start + visible - 1;
    if (end >= total) start = total - visible;
    dot.classList.toggle("hidden", index < start || index > end);
  });
}

update(0);

document.getElementById("next").addEventListener("click", function () {
  index++;
  if (index >= total) index = 0;
  update(index);
});
document.getElementById("prev").addEventListener("click", function () {
  index--;
  if (index < 0) index = total - 1;
  update(index);
});