How to make a black background transition on Slick carousel?

Question

I'm trying to emulate this black/dark transition . It looks like a linear animation, but in between each slide there is about 1 second or so of just pure black.

How could I emulate this with 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
    });

I've set the background as black but the opacity doesn't seem to show the background, rather it just transitions into the next slide.

Any ideas here?

Answer 1

On the example site you added, this is achieved by using the class homeSlider (which is a different library as far as I am aware) that uses:

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

Using Slick, you can set the the background-color: black on the class .slick-track . Here is a fiddle that I demonstrate this on: https://jsfiddle.net/b5bqk68j/4883/