カルーセルの実装ができない

プログラミング初心者です
お手柔らかにお願いします。
3枚の写真のカルーセルの実装を行いたいのですが、
うまくいきません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6  <title>麺屋しん道</title>
7  <link rel=”icon” type=”image/vnd.microsoft.icon” href=“favicon.ico”>
8  <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
9 
10
11  <!-- CSS -->
12  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
13
14  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
15  <link rel="stylesheet" href="css/index.css">
16  <link rel="stylesheet" type="text/css" href="css/slick.css"/>
17  <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
18
19  
20  <!-- jquery  -->
21  
22
23  </head>
24<body>
25  <!-- ヘッダー -->
26  <header>
27    <nav class="navbar navbar-expand-md  navbar-light bg-light fixed-top ">
28      <div class="container-fluid">      
29          <a href="#" class="navbar-brand" style="width:25%;display: inline-block;"><img src="image/logo.jpg" alt="" style="width: 100%;"></a>
30          <button class="navbar-toggler" data-toggle="collapse"  type="button" data-target="#menu">
31            <span class="navbar-toggler-icon"></span>
32          </button>
33          <div class="collapse navbar-collapse" id="menu">
34            <ul class="navbar-nav ml-auto" >
35              <li class="nav-item "><a href="#" class="nav-link">「麺屋　しん道」のルーツ</a></li>
36              <li class="nav-item"><a href="#" class="nav-link">こだわり</a></li>
37              <li class="nav-item"><a href="#" class="nav-link">お品書き</a></li>
38              <li class="nav-item"><a href="#" class="nav-link">お知らせ</a></li>
39              <li class="nav-item"><a href="#" class="nav-link">店舗情報</a></li>
40            </ul>
41          </div>      
42      </div>
43    </nav>
44  </header>
45
46
47  <!-- 背景 -->
48    <div class="topimage bg-dark">
49      <ul class="slider" style="text-align:center ;">
50        <li><img src="image/jquery 1.jpg" alt=""></li>
51        <li><img src="image/jquery 2.jpg" alt=""></li>
52        <li><img src="image/jquery 3.jpg" alt=""></li>
53      </ul>
54    </div>
55      
56  
57
58  
59
60  <footer>
61
62  </footer>
63
64  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
65  <script src="JS/slick.js"></script>
66
67
68  <script >
69    $(document).ready(function(){
70      $('.slider').slick({
71        
72      });
73    });
74  </script>
75
76  
77
78
79
80
81
82  <!--- Script Source Files -->
83  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
84  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
85  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
86  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
87
88
89</body>
90</html>

CSS
1header {
2  z-index: 10;
3}
4
5.navbar-nav li{
6  padding-right: .7rem;
7}
8
9.navbar-dark .navbar-nav .nav-link {
10  
11  padding-top :.8rem;
12}
13
14/* 背景 */
15.topimage {
16  z-index: 1;
17}
18
19.slider {
20  width:100%;
21  margin: 8rem auto;
22}