I grab the root element of the slideshow. This makes the assumption that there is only ever one slideshow, which is what the slideshow assumed, too. After that, I grab all the elements that are not the first child.

Since the NodeList is not an Array, I can’t use Array functions. Instead, I just use a simple for loop. Yes, I can convert the NodeList into an Array but since this is the only time I need to loop through the elements, I’d be wasting time to do so.

for (i=0; i < els.length; i++) {
els[i].classList.add('is-hidden');
}

In the original jQuery script, the fadeIn and fadeOut routines change the opacity by modifying inline styles. This time around, I used CSS transitions to handle this.

The event is attached to the root and rely on event bubbling to respond to when the images are done transitioning. The problem is that the event is fired twice: once for the image fading out and another for the image fading in.

I qualified the image to move to the back to only grab the first child that is hidden. Once it’s moved to the back, the second event firing doesn’t have anything to do.

The last thing we need to do is set up the 3 second interval, just like we had before. Again, we use setInterval. All that happens in the interval, though, is the adding and removing of the is-hidden class.