Javascript 在每张幻灯片上创建带有交叉淡入淡出图像的旋转木马

我正在尝试创建一个旋转木马，每个幻灯片包含2个图像。转盘将自动启动并在幻灯片之间循环。在每张幻灯片上，第一张图像将交叉淡入第二张图像。在两张幻灯片都完成后，再次使用“循环”执行该过程

  <div class="carousel">
    <div class="carousel-slide" alt="SlideA">
      <img class="image" src="..." alt="image1">
      <img class="image" src="..." alt="image2">
    </div>
    <div class="carousel-slide" alt="SlideB">
      <img class="image" src="..." alt="image3">
      <img class="image" src="..." alt="image4">
    </div>
  </div>

SlideA
show image1
fade to image2
move to SlideB

SlideB
show image3
fade to image4
Loop back to SlideA

斯莱迪亚
显示图像1
淡入图像2
移动到SlideB
幻灯片
显示图像3
淡入图像4
循环回到SlideA

查看Slick Slider，它包括执行您描述的操作的所有选项以及更多选项。它的重量也很轻

这不是4张幻灯片，有2个不同的过渡吗？你试过什么吗？如果是这样的话，让我们看看你尝试了什么。