javascript - 如何在 Slick carousel 上制作黑色背景过渡？

Question

我正在尝试模拟 this black/dark transition .它看起来像一个线性动画，但在每张幻灯片之间有大约 1 秒左右的纯黑色。

我如何使用 Slick slider 模拟它？

$('.slider').slick({
      slidesToScroll: 1,
      dots: false,
      prevArrow: false,
      nextArrow: false,
      useTransform: true,
      cssEase: 'linear',
      speed: 4000,
      autoplay: true,
      autoplaySpeed: 4000,
      fade: true,
      infinite: true
    });

我已将背景设置为黑色，但不透明度似乎并未显示背景，而只是过渡到下一张幻灯片。

这里有什么想法吗？

Answer 1

在您添加的示例网站上，这是通过使用 homeSlider 类(据我所知这是一个不同的库)实现的，该类使用:

position: relative;
width: 100%;
height: 50rem;
height: 100vh;
background-color: #000; // Sets background colour here

使用 Slick，您可以在类 .slick-track 上设置 background-color: black。这是我演示的 fiddle :https://jsfiddle.net/b5bqk68j/4883/