fv3枚をスライダー＆fadeで表示させたい

fv3枚をスライダー＆fadeで表示させたいです。
ですが、現状は下記です

何卒よろしくお願いいたします。

前提・実現したいこと

fvをスライダー＆fadeで表示させたい

slick(jq)
1
2$(function(){
3  $('.slider').slick({
4  autoplay: true,
5  autoplaySpeed: 2000,
6  fade: true,
7  speed: 1000,
8  cssEase: 'linear'
9  });
10  });

※申し訳ございませんが、動画が添付できないため完成図は載せられません。

発生している問題・エラーメッセージ

現状はfvが3枚縦に並んでいる状況です。（jqが反応してません）

該当のソースコード

HTML
1    <header class="header">
2        <div class="header-inner header-fixed">
3                    <h1 id="logo">Cresta Design</h1>
4
5                    <nav class="header-nav">
6                            <ul class="header-list">
7                                <li class="list-item"><a href="#">Concept</a></li>
8                                <li class="list-item"><a href="#">Service</a></li>
9                                <li class="list-item"><a href="#"> Works</a></li>
10                                <li class="list-item"><a href="./Contact.html">Contact</a></li>
11                            </ul>
12                    </nav>
13                    <button class="burger-btn">
14                        <span class="bar-bar_top"></span>
15                        <span class="bar-bar_mid"></span>
16                        <span class="bar-bar_bottom"></span>
17                    </button>
18        </div>
19
20            <div class="image-inner">
21                <div class="fv">
22                       <ul class="slider">
23                           <li><img src="./image/fv-bgi_01@2x.jpg" alt="1枚目"></li>
24                           <li><img src="./image/fv-bgi_02@2x.jpg" alt="2枚目"></li>
25                           <li><img src="./image/fv-bgi_03@2x.jpg" alt="3枚目"></li>
26                       </ul>
27                </div>
28                <div class="image-message">
29                        <p>Design for Smile. <br class="sp-br">快適なオフィスを  デザインする</p>
30                </div>
31            </div>
32        </div>
33
34    </header>