在每张幻灯片上创建一个带有交叉淡化图像的轮播

Question

我尝试创建一张每张幻灯片包含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

Answer 1

查看Slick Slider，它包含了您所描述的所有选项以及更多内容。它的重量也很轻。