Как зациклить переключение классов с разным интервалом?

Question

[Никита]

Необходимо переключать активный класс для каждого элемента, но с разными интервалами.
Для первого элемента изначально стоит активный класс и он должен показываться 5 секунд.
Затем, по истечении этого времени, активный класс должен передаваться следующему элементу, а у текущего убираться (с задержкой в 0.5сек после того как класс будет назначен следующему элементу, для траншизина).
Следующий элемент должен показываться уже 10 секунд. По итогу на последнем элементе после 22-х секунд все должно возвращаться к 1-му элементу и так далее в цикле.

HTML:

<div class="slide-element slide_active">
</div>
<div class="slide-element">
</div>
<div class="slide-element">
</div>

JS:

const sliderElements = document.querySelectorAll('.slide-element');
const transitionTime = 500;
const presentationTime = [5,10,22];

let currentElement = 0;
const lastElement = sliderElements.length - 1;

function nextSlide() {
  let nextElement = currentElement + 1;
  if (nextElement > lastElement) nextElement = 0;

  setTimeout(function () {
    // Ставим следующему элементу активный класс
    sliderElements[nextElement].classList.add('slide_active');
    // А у текущего убираем класс с учетом css transtion 500ms
    setTimeout(() => {
      sliderElements[currentElement].classList.remove('slide_active');
    }, transitionTime);

    currentElement++;
    if (currentElement > lastElement) currentElement = 0;

    // Рекурсивный вызов
    // (с ожиданием что каждый последующий вызов будет после presentationTime[current])
    nextSlide();

  }, presentationTime[currentElement] * 1000);
}

nextSlide();

Еще вопрос в догонку — можно ли при прохождении sliderElements.forEach повесить каждый элемент в свой цикл с таймаутом. Расчет времени presentationTime я беру на этом этапе и записываю время для каждого элемента в массив.

Answer 1

[Сергей Соколов]

Событие одно: переключение слайда.
В нём запускать 2 таймаута:

1. один погасить через пол-секунды транзишн,
   
2. второй назначить следующий слайд
   

Comments

[Никита]

Очень лаконичное решение. Спасибо)