I've the following code that should have to works for a slider:

let timeOut, timeOut2;
over = 1;
let back = 0;
setInterval(change2, 8000);

 async function change2() {
  innerFront = slides[over];
  innerBack = slides[back];
  await setTimeout(change, 8000);

  innerFront.querySelectorAll('figure')[0].classList.remove('isActive');
  innerFront.classList.remove('slideshow__inner--front');
  innerBack.querySelectorAll('figure')[0].classList.remove('isActive');
  innerBack.classList.remove('slideshow__inner--back');
  over -= 1;
  if (over < 0) over = slides.lenght;
  back = over - 1;
  if (back < 0) back = slides.lenght;
  slides[over].classList.add('slideshow__inner--front');
  slides[back].classList.add('slideshow__inner--back');
}

function change() {
  return new Promise(function(resolve, reject) {
    innerFront.querySelectorAll('figure')[0].classList.add('isActive');
    timeOut2 = setTimeout(()=> {
      innerBack.querySelectorAll('figure')[0].classList.add('isActive');
    }, 1000);
    resolve();
  });
}

My problem consists in the fact that the 'change' function seems not to be performed despite the Await for Promise. In fact, the subsequent instructions are immediately performed, and obviously this generate errors. I still have doubts about the promises, which I am studying, and here I think there can be something conceptual. Does anyone have the patience to explain to me where I'm wrong?