<div class="wrapper">
  <div class="select">
    <button class="select__button" data-to="left">
      &lt;
    </button>
    <div class="select__value" data-index="0">
      ...
    </div>
    <button class="select__button" data-to="right">
      &gt;
    </button>
  </div>
</div>
body {
  margin: 50px;
  font-family: sans-serif;
}

.wrapper {
  width: 200px;
}

.select {
  border-radius: 20px;
  background-color: #e6e6e6;
  display: flex;
  align-items: center;
  color: #555;
  justify-content: space-between;
  padding: 5px;
}

.select__button {
  width: 25px;
  height: 25px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: flex;
  alig-items: center;
  justify-content: center;
  cursor: pointer;
}

.select__button:hover {
  background-color: #ddd;
}
const options = [
  'item 1',
  'item 2',
  'item 3',
  'item 4',
  'item 5'
];

const optionElem = document.querySelector('.select__value');

window.addEventListener('DOMContentLoaded', () => {
  optionElem.innerText = options[+optionElem.dataset.index];
});

const buttons = document.querySelectorAll('.select__button');

buttons.forEach(button => {
  button.addEventListener('click', function () {
    const isLeft = this.dataset.to === 'left';
    const index = +optionElem.dataset.index;
    const newIndex = isLeft ? index - 1 : index + 1;

    if (newIndex in options) {
      buttons[0].disabled = false;
      buttons[1].disabled = false;
      
      optionElem.innerText = options[newIndex];
      optionElem.dataset.index = +newIndex;
      
      if (newIndex === options.length - 1) {
        buttons[1].disabled = true;
      } else if (newIndex === 0) {
        buttons[0].disabled = true;
      }
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.