Infinite previous and next selection

Select each element in a selection loop. If you go forward as soon as you finish the list of elements you will start selecting from the beginning and the same if you go in opposite direction.

by Génesis García Morilla

HTML

<button id="previous">Previous</button>
<button id="next">Next</button>
<ul>
  <li></li>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

button {
  font-size: 2vw;
  border-radius: 2vw;
  border: 0.5vw solid #ccc;
  padding: 1vw 2.5vw;
  cursor: pointer;
  text-transform: uppercase;
  color: #50514F;
}

button:focus {
  outline: none;
}

li {
  display: inline-flex;
  list-style-type: none;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  background-color: #50514F;
}

li.selected {
  border: 1vw solid #9BC53D;
  ;
}

JavaScript

document.querySelector('#next').addEventListener('click', () => {
  const $selected = document.querySelector('.selected');
  const $next_element = $selected.nextElementSibling;

  if (!$next_element)
    $next_element = $selected.parentElement.firstElementChild;

  $selected.classList.remove('selected');
  $next_element.classList.add('selected');
});

document.querySelector('#previous').addEventListener('click', () => {
  const $selected = document.querySelector('.selected');
  const $previous_element = $selected.previousElementSibling;

  if (!$previous_element)
    $previous_element = $selected.parentElement.lastElementChild;

  $selected.classList.remove('selected');
  $previous_element.classList.add('selected');
});