slickの矢印の表示方法

前提・実現したいこと

Webプログラミング初心者です。
ポートフォリオサイトに画像をslickを用いて表示しようとしたのですが画像を前後に進める矢印がうまく表示されません。
なぜでしょうか？（個人情報の含まれる部分のコードは省略しています）

HTMLコード

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <link rel="stylesheet" type="text/css" href="my.css"/>
5  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
6  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
7  <script type="text/javascript" src="slick.min.js"></script>
8</head>
9<body>
10<main>
11        <div>
12　　　　　　　<div class="slider">
13                <div> img1 </div>
14                <div> img2 </div>
15                <div> img3 </div>
16                <div> img4 </div>
17            </div>
18        </div>
19</main>
20</body>
21</html>
22

CSSコード

CSS
1.slider {
2  margin: 0 24px;
3  overflow: hidden;
4}
5
6.slider.slick-initialized {
7  display: block;
8}
9
10.slider img{
11    width: 100%;
12}
13
14.slider-arrow {
15  position: absolute;
16  top: 50%;
17  height: 36px;
18  margin-top: 18px;  
19  color: #bd77f2;
20  line-height: 36px;
21  font-size: 28px;
22  cursor: pointer;
23  z-index: 10;  
24}
25
26.slider-prev {
27  left: 0;
28}
29
30.slider-next {
31  right: 0;
32}
33
34.slick-slide {
35  padding: 1.5em 0;
36  color: #fff;
37  text-align: center;
38  font-size: 1.1em;
39  outline: 0;
40  background-color: #bd77f2;
41}

JavaScriptコード

JS
1/*jslint browser: true*/
2/*global $*/
3$('.slider').slick({
4    accessibility: true,
5    autoplay: true,
6    autoplaySpeed: 5000,
7    dots: true
8});

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

回答1件

ベストアンサー

slick-theme.css も読み込んでください。

投稿2019/09/03 12:41

kei344

総合スコア69407

Red_Bull

2019/09/03 12:57

kei344

2019/09/03 13:29

提示されたコードのCSSとパスが違うようなので、読み込まれていないのでは。 CDNで公開されている下記パスでも同じでしょうか。 https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css

kei344

2019/09/03 13:41

.slider { margin: 0 24px; overflow: hidden;/* これを消さないと出てこない */ }

Red_Bull

2019/09/03 14:05

同じでした... 同じフォルダ内に２つCSSが入っているのが原因なのでしょうか？ overflow: hidden を消しましたが出てきません...

kei344

2019/09/03 14:07

背景は白ですか？それなら白い矢印が出てきているのでわかりにくいかもしれません。

kei344

2019/09/03 14:09

https://jsfiddle.net/zf8ywvko/

Red_Bull

2019/09/03 14:10

背景色を白以外に変えてみましたが出ていませんでした...

kei344

2019/09/03 14:13

エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

Red_Bull

2019/09/03 14:28

Failed to load resource: net::ERR_FILE_NOT_FOUND my.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND main.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND slick-theme.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND slick.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND func_slick.js:1 とことごとくエラーが出ていましたコードに書いているつもりなのですが...

kei344

2019/09/03 14:32

キャッシュをクリアしてみてください。あとはブラウザを変えてみてください。（ Firefoxとか）

Red_Bull

2019/09/04 14:25

キャッシュのクリアはどうやってやればいいのか教えていただけませんか...?

kei344

2019/09/04 15:06

【【みんなの知識ちょっと便利帳】Webページを最新の状態で見る - ブラウザーのフルリロード、スーパーリロード方法】 https://www.benricho.org/Tips/page_reload/ 【Chromeブラウザでスーパーリロードする方法 #Pistatium】 https://kimihiro-n.appspot.com/show/86002 【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】 http://uzurea.net/cacheclear-and-superreload-2018/

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