slick.jsがうまく表示できない。

前提・実現したいこと

画像のスライドを設置するためにslick.jsを導入しましたが、
うまく表示されません。

現状slickスライダーで表示されているのは下記画像の"現在のデザイン"となります。
.carousel内のコンテンツが横並びにならず縦並びの表示となってしまっています。
prev,nextArrowの部分も表示されません。

下記画像の"実現したいデザイン"のようなデザインにコーディングするには何が足らないかを教えてください。
よろしくお願いいたします。

該当のソースコード

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" />
6    <title>Weaving Will | Top</title>
7    <meta
8      name="description"
9      content="新潟県妙高市を拠点に活動する複業Webデザイナーのポートフォリオサイトです。"
10    />
11    <!-- CSS -->
12    <link
13      rel="stylesheet"
14      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
15    />
16    <!-- Add the slick-theme.css if you want default styling -->
17    <link
18      rel="stylesheet"
19      type="text/css"
20      href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
21    />
22    <!-- Add the slick-theme.css if you want default styling -->
23    <link
24      rel="stylesheet"
25      type="text/css"
26      href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
27    />
28    <link
29      rel="stylesheet"
30      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
31    />
32    <link rel="stylesheet" href="./css/style.css" />
33
34    <!-- Font Awosome -->
35    <script
36      src="https://kit.fontawesome.com/8ba1f84262.js"
37      crossorigin="anonymous"
38    ></script>
39    <!-- Font -->
40    <script>
41      (function (d) {
42        var config = {
43            kitId: "qow8hvi",
44            scriptTimeout: 3000,
45            async: true,
46          },
47          h = d.documentElement,
48          t = setTimeout(function () {
49            h.className =
50              h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
51          }, config.scriptTimeout),
52          tk = d.createElement("script"),
53          f = false,
54          s = d.getElementsByTagName("script")[0],
55          a;
56        h.className += " wf-loading";
57        tk.src = "https://use.typekit.net/" + config.kitId + ".js";
58        tk.async = true;
59        tk.onload = tk.onreadystatechange = function () {
60          a = this.readyState;
61          if (f || (a && a != "complete" && a != "loaded")) return;
62          f = true;
63          clearTimeout(t);
64          try {
65            Typekit.load(config);
66          } catch (e) {}
67        };
68        s.parentNode.insertBefore(tk, s);
69      })(document);
70    </script>
71    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
72    <script
73      type="text/javascript"
74      src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
75    ></script>
76    <script src="./js/carousel.js"></script>
77  </head>
78
79  <body>
80   
81
82    
83
84      
85
86        <section class="works">
87          <div class="container">
88            <div class="works-wrapper">
89              <h2 class="section-title">Works</h2>
90              <ul class="carousel">
91                <li>
92                  <a href="#">
93                    <div class="img-wrapper">
94                      <img src="./images/lapluie-min@2x.jpg" alt="" />
95                    </div>
96                    <div class="slide-info">
97                      <p>LA PLUIE</p>
98                      <span>View Details</span>
99                    </div>
100                  </a>
101                </li>
102                <li>
103                  <a href="#">
104                    <div class="img-wrapper">
105                      <img src="./images/hanaemi-min@2x.jpg" alt="" />
106                    </div>
107                    <div class="slide-info">
108                      <p>hanaemi</p>
109                      <span>View Details</span>
110                    </div>
111                  </a>
112                </li>
113                <li>
114                  <a href="#">
115                    <div class="img-wrapper">
116                      <img
117                        src="./images/darling-house-design-min@2x.jpg"
118                        alt=""
119                      />
120                    </div>
121                    <div class="slide-info">
122                      <p>Darling House Design inc.</p>
123                      <span>View Details</span>
124                    </div>
125                  </a>
126                </li>
127                <li>
128                  <a href="#">
129                    <div class="img-wrapper">
130                      <img src="./images/tokidoki-min@2x.jpg" alt="" />
131                    </div>
132                    <div class="slide-info">
133                      <p>Toki Doki</p>
134                      <span>View Details</span>
135                    </div>
136                  </a>
137                </li>
138
139                <li>
140                  <a href="#">
141                    <div class="img-wrapper">
142                      <img src="./images/hicheese-min@2x.jpg" alt="" />
143                    </div>
144                    <div class="slide-info">
145                      <p>Hi Cheese!</p>
146                      <span>View Details</span>
147                    </div>
148                  </a>
149                </li>
150              </ul>
151            </div>
152            <div id="arrow-wrapper">
153              <div id="arrow"></div>
154              <a href="works.html">All Works</a>
155            </div>
156          </div>
157        </section>
158
159        <section class="contact">
160          <div class="container">
161            <div class="contact-wrapper shadow">
162              <h2 class="section-title">Contact</h2>
163              <div class="contact-text">
164                <p>制作のご依頼、ご相談など気軽にお問い合わせください。</p>
165                <a href="contact.html" class="btn">Contact</a>
166              </div>
167            </div>
168          </div>
169        </section>
170      </main>
171
172      
173
174    <!-- JS -->
175    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
176    <script
177      type="text/javascript"
178      src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
179    ></script>
180    <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
181    <script src="./js/humburger-menu.js"></script>
182    <script src="./js/loading.js"></script>
183
184    <script>
185      var swiper = new Swiper(".swiper-container", {
186        navigation: {
187          nextEl: ".swiper-button-next",
188          prevEl: ".swiper-button-prev",
189        },
190      });
191    </script>
192  </body>
193</html>

css
1 #arrow-wrapper {
2  display: -webkit-box;
3  display: -ms-flexbox;
4  display: flex;
5  -webkit-box-pack: end;
6      -ms-flex-pack: end;
7          justify-content: flex-end;
8  -webkit-box-align: center;
9      -ms-flex-align: center;
10          align-items: center;
11  line-height: 1;
12  font-family: effra, sans-serif;
13  margin-top: 4rem;
14}
15
16#arrow-wrapper #arrow {
17  display: -webkit-box;
18  display: -ms-flexbox;
19  display: flex;
20  font-weight: 200;
21}
22
23#arrow-wrapper #arrow .slick-arrow {
24  margin-right: 4.8rem;
25}
26
27#arrow-wrapper .slick-prev,
28#arrow-wrapper .slick-next {
29  position: static;
30  font-size: 1.8rem;
31}
32
33#arrow-wrapper .slick-prev {
34  left: 0;
35}
36
37#arrow-wrapper .slick-next {
38  right: 0;
39}
40
41#arrow-wrapper a {
42  font-size: 1.8rem;
43  color: #000a14;
44  font-weight: 400;
45  -webkit-transition: 1s all;
46  transition: 1s all;
47}
48
49#arrow-wrapper .slick-arrow {
50  font-size: 3.2rem;
51  cursor: pointer;
52}
53
54#arrow-wrapper a:hover {
55  color: #878efc;
56}
57

javascript
1 $(document).ready(function() {
2    $(".carousel").slick({
3        appendArrows: $('#arrow'),
4        centerMode: true,
5        slidesToShow: 3,
6        prevArrow: '<div class="slider-arrow slider-prev"><span><</span></div>',
7        nextArrow: '<div class="slider-arrow slider-next"><span>></span></div>',
8        responsive: [{
9            breakpoint: 769, 
10            settings: {
11                swipe: true,
12                slidesToShow: 1,
13            }
14        }]
15
16    });
17});
18

　現在のデザイン
　実現したいデザイン

runnynose

2021/07/02 22:17

どううまくいっていないか教えていただきたいです。全く動かないのであれば導入部分でミスっている可能性があるので、slickのjsやcssの読み込み部分まで提示できますでしょうか？とりあえず.carouselに対してslickを適用させようとしているようですが、html上には.carousel要素は存在していないようです。あと、cssがscssになっているようなので、cssで貼ること可能でしょうか？また、最後に載せている画像は何を説明したいものになりますか？

BB_Y66w_design

2021/07/03 00:23

runnynoseさん初めまして。説明不足ですみません。質問文をより具体的に記入しました。また不明点等あればご連絡ください。

K_3578

2021/07/03 00:29

とりあえず邪魔だし、コードブロック生成時に入ってる「ソースコード」は消しときましょ。見づらいし。

yuki84web

2021/07/03 02:11

// で始まるパスで指定してますけど、ウェブサーバーを使わずにローカルでHTMLファイルをダブルクリックで開いて確認している、なんてことはないですね？

BB_Y66w_design

2021/07/03 02:50

yuki84webさん、はじめまして。申し訳ございません。 // で始まるパスで指定とは、どこの部分でしょうか？

yuki84web

2021/07/03 03:52

//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css. //cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css httpかhttpsでアクセスしないと当然読み込めませんよ？