スライドでslickを用いた応用の実装をしたいですが、自己解決できず困っています。

https://www.dot-st.com/cp/studioclip/tsubomi_2021
上記リンクのようなスライドをjqueryのプラグインの「slick」で作りたいです。
2枚の画像が上と下から来て、1枚目に戻るときはフェードインされていると思います。

私の画像は
1スライド目は1枚画像
2スライド目は2枚画像
3スライド目は1枚画像
4スライド目は2枚画像
です。

なので、
1スライド目から２スライド目は上下からスライドイン
2スライド目から３スライド目はフェードイン
3スライド目から４スライド目は上下からスライドイン
４スライド目から１スライド目はフェードイン
という実装をしたいですが、自己解決できず詰まっている状態です。

わかる方いましたら、お願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <link rel="stylesheet" href="css/slick.css">
6  <link rel="stylesheet" href="css/style.css">
7  <title>Document</title>
8</head>
9<body>
10  <ul class="slide">
11    <li class="full"><div><img src="img/main_slide1.png"></div></li>
12    <li class="half"><div><img src="img/main_slide2_1.png"></div><div><img src="img/main_slide2_2.png"></div></li>
13    <li class="full"><div><img src="img/main_slide3.png"></div></li>
14    <li class="half"><div><img src="img/main_slide4_1.png"></div><div><img src="img/main_slide4_2.png"></div></li>
15  </ul>
16  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
17  <script src="js/slick.min.js"></script>
18  <script src="js/script.js"></script>
19</body>
20</html>```

css
1*{
2  box-sizing: border-box;
3  font-size: 16px;
4  font-weight: normal;
5  padding: 0;
6  margin: 0;
7}
8img{
9  display: block;
10  width: 100%;
11}
12a{
13  text-decoration: none;
14}
15li{
16  list-style-type: none;
17}
18
19.slide{
20  width: 50rem;
21  margin: 0 auto;
22}
23.slide .half{
24  display: flex;
25}```

js
1/* common */
2*{
3  box-sizing: border-box;
4  font-size: 16px;
5  font-weight: normal;
6  padding: 0;
7  margin: 0;
8}
9img{
10  display: block;
11  width: 100%;
12}
13a{
14  text-decoration: none;
15}
16li{
17  list-style-type: none;
18}
19
20.slide{
21  width: 50rem;
22  margin: 0 auto;
23}
24.slide .half{
25  display: flex;
26}