I want to add the “is-active” class in the active slide and the “is-out” class in the slide that comes out

Question

I have the following HTML document which is a SlideShow:

<div class="ReferencesCarousel">
  <div class="ReferencesCard"></div>
  <div class="ReferencesCard"></div>
  <div class="ReferencesCard"></div>
</div>

The javascript code relating to the code below is as follows:

var ReferenceIndex = 0;
showReferences();
function showReferences() {
 var i;
 var References = document.getElementsByClassName("ReferencesCard");
 for (i = 0; i < References.length; i++) {
  References[i].classList.remove('is-active');
 }
 ReferenceIndex++;
 if (ReferenceIndex > References.length) {ReferenceIndex = 1}
 References[ReferenceIndex-1].classList.add('is-active');
 setTimeout(showReferences, 2000);
}

What I want to do is add the "is-out" class in the slide that will come out.

That means each class that contains "is-active" changes to "is-out" and the "is-out" class will be added to the next slide.

Another thing: the is-out class should last 1 second and it should be deleted.

Answer 1

You can use querySelector to find the node that has the.isActive class. Then you can remove it from the node where it occurs.

It will looking something like this:

let isActive = document.querySelector('.is-active')
if (isActive !== null){
isActive.classList.remove('is-active')

The setInterval method will take care of your timing issue. It will run a function after a set amount of time determined by you. Read more here.

Instead of running a for loop, you can set i = 0, like you did above. Then within your setInterval function, have:

i++
References[i].classList.add('is-active')

All of these together will 1) search for any nodes with the 'is-active' class 2)remove it, 3) add the 'is-active' class to the node in your list with index value equal to i in that interval.