jqueryのslickが反映されない

スクリプトファイルに記載したslickが反映されません。
同じファイルに記載しているclickなどは動いているためファイルに問題はないと思います。

目標としているサイト
https://code-step.com/demo/html/media/?your-name=&your-email=&your-message=#

jquery
1$(function() {
2    $('.humberger').click(function() {
3        if($('#header').hasClass('open')) {
4            $('#header').removeClass('open');
5        }else {
6            $('#header').addClass('open');
7        }
8    });
9
10    $('#mask').click(function() {
11        $('#header').removeClass('open');
12    });
13    $('#navi a').click(function() {
14       $('#header').removeClass('open'); 
15    });
16
17    $('.slick-area').slick({
18        centerMode : true ,
19        centerPadding:'100px',
20        arrows:false,
21        slideToShow:3,
22        responsive: [
23            {
24              breakpoint: 768,
25              settings: {
26                centerPadding: '50px',
27                slidesToShow: 1
28              }
29            }
30          ]
31    });
32});

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>       
4        <meta charset="utf-8">
5        <title>Sneakers</title>
6        <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキス">
7        <meta name="viewport" content="width=device-width, initial-scale=1">
8        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
11        <link rel="stylesheet" href="stylesheet.css">   
12    </head>
13
14    <body>
15        <header id="header">
16            <h1 class="site-title"><a href="#"><img src="https://code-step.com/demo/html/media/img/logo.svg" alt="sneakers"></a></h1>
17            <nav id="navi">
18                <ul class="navi-menu">
19                    <li><a href="#">PICK UP</a></li>
20                    <li><a href="#">FEATURE</a></li>
21                    <li><a href="#">CONTACT</a></li>
22                </ul>
23                <ul class="navi-sns">
24                    <li><a href="https://twitter.com/">Twitter</a></li>
25                    <li><a href="https://www.facebook.com/">Facebook</a></li>
26                    <li><a href="https://www.instagram.com/">Instagram</a></li>
27                </ul>
28            </nav>
29            <div class="humberger">
30                <span></span>
31                <span></span>
32                <span></span>
33            </div>
34            <div id="mask"></div>
35        </header>
36
37        <main id="main">
38            <div>
39                <video id="bg-video" src="https://code-step.com/demo/html/media/video/video.mp4" loop muted autoplay playsinline ></video>
40            </div>
41
42            <section id="pickup">
43                <h2 class="sec-title">PICK UP</h2>
44                <ul class="slick-area">
45                    <li><img src="https://code-step.com/demo/html/media/img/pickup9.jpg" alt=""></li>
46                    <li><img src="https://code-step.com/demo/html/media/img/pickup1.jpg" alt=""></li>
47                    <li><img src="https://code-step.com/demo/html/media/img/pickup2.jpg" alt=""></li>
48                    <li><img src="https://code-step.com/demo/html/media/img/pickup3.jpg" alt=""></li>
49                    <li><img src="https://code-step.com/demo/html/media/img/pickup4.jpg" alt=""></li>
50                    <li><img src="https://code-step.com/demo/html/media/img/pickup5.jpg" alt=""></li>
51                    <li><img src="https://code-step.com/demo/html/media/img/pickup6.jpg" alt=""></li>
52                    <li><img src="https://code-step.com/demo/html/media/img/pickup7.jpg" alt=""></li>
53                    <li><img src="https://code-step.com/demo/html/media/img/pickup8.jpg" alt=""></li>
54                </ul>
55            </section>
56         
57
58       
59
60
61
62        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" loop autoplay muted playsinline></script> 
63        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
64        <script type="text/javascript" src="script.js"></script>             
65    </body>
66
67
68
69
70</html>

css
1/*all*/
2a {
3    text-decoration: none;
4    color: #121212;
5}
6li {
7    list-style: none;
8}
9html {
10    font-size: 100%;
11}
12body {
13    color: #121212;
14    font-size: 0.9rem;
15    line-height: 1.7;
16}
17img {
18    max-width: 100%;
19}
20.site-title {
21    line-height: 1px;
22}
23.site-title a {
24    display: block;
25}
26.sec-title {
27    font-size: 2.25rem;
28    margin-bottom: 30px;
29    text-align: center;
30  }
31
32/*header*/
33#header {
34    display: flex;
35    width:100% ;
36    justify-content: space-between;
37    padding: 20px 40px;
38    position: fixed;
39    z-index: 10;
40    background-color: #fff;
41}
42
43#navi {
44    display: block;
45    left:-300px ;
46    position: fixed;
47    top: 0;
48    bottom: 0;
49    width: 300px;
50    color:#fff ;
51    padding: 60px 25px;
52    transition: all 0.5s;
53    z-index: 20;
54    overflow-x: hidden;
55    overflow-y: auto;
56    -webkit-overflow-scrolling: touch;
57    opacity: 0;
58}
59#navi a {
60    color: #fff;
61}
62.open #navi {
63    left: 0;
64    opacity: 1;
65}
66#navi ul {
67    margin: 0;
68    padding: 0;
69}
70#navi  .navi-menu {
71    margin-bottom: 60px;
72}
73
74#navi .navi-menu li {
75    border-top: 1px solid #fff;
76    padding: 20px 0;
77    margin: 0;
78    position: relative;
79}
80#navi .navi-menu li:last-child {
81    border-bottom: 1px solid #fff;
82}
83
84#navi .navi-sns li {
85    padding: 5px 0;
86}
87
88
89.humberger {
90    width: 30px;
91    height: 30px;
92    position: fixed;
93    cursor: pointer;
94    transition: all 0.5s;
95    z-index: 20;
96    top: 25px;
97    right: 45px;
98    display: block;
99}
100
101.humberger span {
102    background-color: #000;
103    width: 30px ;
104    height: 2px;
105    display: block;
106    position: absolute;
107    transition: all 0.5s;
108    left: 0%;
109
110}
111
112.humberger span:nth-child(1) {
113    top: 4px;
114}
115
116.humberger span:nth-child(2) {
117    top: 14px;
118}
119
120.humberger span:nth-child(3) {
121    bottom:4px;
122}
123
124#mask {
125    display: none;
126    transition: 0.5s;
127}
128
129
130.open #mask {
131    position: fixed;
132    display: block;
133    top: 0;
134    left: 0;
135    width: 100%;
136    height: 100%;
137    background-color: #000;
138    opacity:0.8;
139    z-index: 10;
140    cursor: pointer;
141}
142
143.open .humberger span:nth-child(1) {
144    -webkit-transform: translateY(10px) rotate(-315deg);
145    transform: translateY(10px) rotate(-315deg);
146}
147
148.open .humberger span:nth-child(2) {
149    opacity: 0;
150}
151
152.open .humberger span:nth-child(3) {
153    -webkit-transform: translateY(-10px) rotate(315deg);
154    transform: translateY(-10px) rotate(315deg);
155}
156 .open .humberger span {
157    background-color: #fff;
158}
159
160
161#main {
162    padding-top: 80px;
163}
164#bg-video {
165    width: 100%;
166}
167
168#main .none-video {
169    background-color: #121212;
170    opacity: 0.2; 
171    width: 100%;
172    height: 370px;
173    display: block;
174}
175
176#pickup {
177    width: 100%;
178    padding: 100px 0 50px 0;
179}
180#pickup .slick-area {
181    font: 0;
182}
183#pickup .slick-area li{
184    padding:0 30px;
185
186}
187

m.ts10806

2021/12/01 03:17

>同じファイルに記載しているclick とは？

tera193

2021/12/01 07:32

slickの上に記載している下記の部分です。 $('#mask').click(function() { $('#header').removeClass('open'); }); $('#navi a').click(function() { $('#header').removeClass('open'); });

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示の範囲ですと、CSS を読み込んでいないように思えます。

Getting Started | slick - the last carousel you'll ever need

投稿2021/12/01 03:11

Lhankor_Mhy

総合スコア36117

tera193

2021/12/01 07:28

ご回答ありがとうございます。 cssが読み込んでいないというのはどういうことでしょうか

Lhankor_Mhy

2021/12/01 07:50

CSSとはカスケーディングスタイルシートの略で、HTML文書の見た目を修飾するものです。 webページはHTMLとCSSとJavaScriptで構成されることが多いです。 slick も同様です。 CSSの読み込みはlink要素で行われることが多いのですが、slick.cssなどについてその記述がない、というのが回答の趣旨です。

tera193

2021/12/01 08:05

理解いたしました。 htmlのheadタグ内で <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> と記載したところ反映されました。丁寧な回答ありがとうございます。

行動規範の内容に同意します