slick.jsで画像をフェードイン/アウトする際に背景画像を表示させたい

Question

前提・実現したいこと

slickで画像がフェードアウトした時に一瞬(例えば0.3秒)だけ背景を表示させたい。
イメージとしは画像が切り替わる時にそのまま次の画像に移るのではなく、背景を表示してから次の画像に移るようにしたいです。
背景→img1(2秒)→背景(0.3秒)→img2(2秒)→背景(0.3秒)→img3(2秒).....
（slickの画像はhtmlのimgで指定してあります。）

該当のソースコード

<header>
  <ul class="slider">
    <li><img src="images/01.jpg" alt="image01"></li>
    <li><img src="images/02.jpg" alt="image02"></li>
    <li><img src="images/03.jpg" alt="image03"></li>
  </ul>
</header>

header {
　height: 100vh;
  background-color: blue;
}

img {
   width: 100vw;
   height: 100vh;

$(function () {
  $(".slider").slick({
    dots: false,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000,
    fade: true,
    speed: 1000,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    lazyLoad: "ondemand",
  });
});

試したこと

speedを変えたらフェードアウトの時間が増えてheaderの背景色が見えるかと思いましたが、だめでした。

恐れ入りますがどなたか教えて頂けると助かります。

Answer 1

こんにちは。

こんな感じでしょうか？
（変化がわかりやすいように、値を極端にしていますので、適宜ご変更ください）

.slick-active {
	transition: all 5s 1s !important;
}

Comments

[thayamizu]

ありがとうございます！！
なるほど、、slick.jsの中身をちゃんと理解してない初心者なもので、そこには気付けませんでした。
どのタイミングで.slick-activeが付与されて、そのcssの中身は何なのかを見るきっかけとなりました！（全部は理解できてませんが・・・）
本業を別にもっていらっしゃるようですが、的確なご回答ありがとうございます。尊敬します！