How to add crossfade transition to this aria auto-rotating slideshow

Question

I'm trying to customize this Aria Auto-Rotating Image Carousel Example with a crossfade transition. Seems this question gets asked often, but I can't seem to get a solution from the other answers. My best try yet is simply getting the images to fade-in, not crossfade (jsfiddle example of fade-in on this carousel).

Here is code that fades in:

.fade {
  animation-duration: 1.7s;
  animation-name: fade-in;
 }

@keyframes fade-in {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

I learned html and css by tweaking code, but learning how to tweak javascript this way hasn't been working. Any pointers on how to tweak this in CSS, or how/where to look at editing the javascript, would be so so appreciated!