<div class="block">
    <div class="block__buttons">
      <button class="button">Button 1</button>
      <button class="button">Button 2</button>
      <button class="button">Button 3</button>
      <button class="button">Button 4</button>
      <button class="button">Button 5</button>
      <button class="button">Button 6</button>
    </div>
  </div>

.block {
  display: flex;
  align-items: center;
  height: 80px;
  width: 200px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  overflow: hidden;
  text-align: center;
}

.button {
  padding: 10px 20px;
  margin: 0 5px;
  background-color: #f1f1f1;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #ddd;
}

.button.active {
  background-color: #007bff;
  color: #fff;
  transition: all 0.4s;
}

.block__buttons {
  display: flex;
  align-items: center;

  position: relative;

  transition: all 0.4s;
}

document.addEventListener('DOMContentLoaded', () => initApp());

function initApp() {
  //находим все кнопки
  /**
   * @type {HTMLButtonElement[]}
   */
  const buttons = document.querySelectorAll('.button');
  /**
   * @type {HTMLDivElement}
   */
  const blockElement = document.querySelector('.block');
  /**
   * @type {HTMLDivElement}
   */
  const buttonsBlockElement = document.querySelector('.block__buttons');
  
  let buttonBounds;
  let newLeft;
  const blockBounds = blockElement.getBoundingClientRect();

  // добавляем event listener каждой кнопке
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      // удаляем "active" у каждой кнопки
      buttons.forEach((btn) => btn.classList.remove('active'));

      // добавляем "active" каждой нажатой кнопке
      button.classList.add('active');

      buttonBounds = button.getBoundingClientRect();
      newLeft = blockBounds.left + blockBounds.width/2 - buttonBounds.width/2 - button.offsetLeft;
      buttonsBlockElement.style.left = `${newLeft}px`;
    });
  });

  if(buttons?.length>0){
    buttons[Math.trunc(buttons.length/2)].click();
  }
}