javascript - 如何向此 aria 自动旋转幻灯片添加交叉淡入淡出过渡

Question

我正在尝试使用交叉渐变过渡自定义此Aria 自动旋转图像轮播示例。似乎这个问题经常被问到，但我似乎无法从其他答案中得到解决方案。我最好的尝试只是让图像淡入，而不是交叉淡入（这个轮播上淡入的 jsfiddle 示例）。

这是淡入淡出的代码：

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

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

我通过调整代码来学习 html 和 css，但是学习如何以这种方式调整 javascript 并没有奏效。任何关于如何在 CSS 中调整它，或者如何/在哪里查看编辑 javascript 的指针，将非常感激！