JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containter">
  <div class="content-circle">
    <div class="circle active"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>

  <button onClick="previousClick()">
    anterior
  </button>

  <button onClick="nextClick()">
    proximo
  </button>
</div>

CSS

.content-circle{
  display: flex;
  position: relative;
  top: 161px;
  justify-content: center;
}

.circle{
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #c3c3c3;
  margin-right: 10px;
}

.active{
  background-color: #0e6ccb;
}

JavaScript

function nextClick() {
  const wrapperCircle = document.getElementsByClassName('circle');
  for (const item of wrapperCircle) {
    if (item.nextElementSibling != null) {
      if (item.classList.contains('active')) {
        item.classList.remove('active');
        item.nextElementSibling.classList.add('active');
        break;
      } 
    } else {
    	//caso queira um infinite: 
      //vai bater no ultimo e voltar pro primeiro
      //se nao quiser, sĂł apagar o else
      item.classList.remove('active');
      wrapperCircle[0].classList.add('active');
      break;
    }
  }
}

function previousClick() {
  const wrapperCircle = document.querySelectorAll('.circle');
  for (const item of wrapperCircle) {
    if (item.previousElementSibling != null) {
      if (item.classList.contains('active')) {
        item.classList.remove('active');
        item.previousElementSibling.classList.add('active');
        break;
      }
    }
  }
}