Add class to next item / remove class prev item in cycle

by Andrew Maestro

HTML

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

JavaScript

function cycleClass(items, index) {
  items.forEach(function (item) {
    item.classList.remove('active')
  });
  items[index].classList.add('active');

  setTimeout(function () {
    cycleClass(items, index === items.length - 1 ? 0 : index + 1);
  }, 2500);
}

document.querySelectorAll('ul').forEach(function (item) {
  const items = item.querySelectorAll('li');
  cycleClass(items, 0);
});