slickのdotsを使用すると画像が消えます

slickを利用してdotsを表示しようとすると、
slickで表示されている画像が全て消えてしまいます。
解決方法が知りたいです。

slick.css、slick-theme.css、slick.min.js、fontsをフォルダに入れています。

dots以外は正常にカルーセルスライダーになっています。

html
1<div class="main-top">
2      <div class="main-slick">
3        <div class="slick" id="slick1">
4          <h1>くつろぎの環境で行う<br>からだに優しい<br>内視鏡検査</h1>
5        </div>
6        <div class="slick" id="slick2">
7          <h1>胃腸と消化器全般の<br>専門医として</h1>
8        </div>
9        <div class="slick" id="slick3">
10          <h1>地元の皆さまの<br>かかりつけ医として</h1>
11        </div>
12      </div>
13      <div class="main-news">
14        <h1 class="news">お知らせ　<span>2020.8.19</span>　<a href="#">発熱・呼吸器に心配な方へ</a></h1>
15        <h1 class="news">お知らせ　<span>2020.6.30</span>　<a href="#">猫が大好きな方へ</a></h1>
16        <h1 class="news">お知らせ　<span>2020.1.21</span>　<a href="#">いっぬが好きな方へ</a></h1>
17      </div>
18    </div>

css
1#slick1 , #slick2 , #slick3{
2  background-image: url('file:///C:/Users/%E7%9B%B8%E9%A6%AC%E6%98%A5%E8%B2%B4/Desktop/html_lesson/html/Visual%20Studio%20Code/2.code%E7%B7%B4%E7%BF%92(HP%E7%89%88)/1.HP_%E3%83%8B%E3%83%A3%E3%83%B3%E3%83%9F%E3%82%AF%E3%83%AA%E3%83%8B%E3%83%83%E3%82%AF/photo/1.jpg');
3  background-size: cover;
4  width: 100%;
5  height: 400px;
6  margin: 0 auto;
7  border-top-left-radius: 50px;
8  border-bottom-right-radius: 50px;
9  position: relative;
10}
11
12#slick2 {
13  background-image: url('file:///C:/Users/%E7%9B%B8%E9%A6%AC%E6%98%A5%E8%B2%B4/Desktop/html_lesson/html/Visual%20Studio%20Code/2.code%E7%B7%B4%E7%BF%92(HP%E7%89%88)/1.HP_%E3%83%8B%E3%83%A3%E3%83%B3%E3%83%9F%E3%82%AF%E3%83%AA%E3%83%8B%E3%83%83%E3%82%AF/photo/9.jpg');
14}
15
16#slick3 {
17  background-image: url('file:///C:/Users/%E7%9B%B8%E9%A6%AC%E6%98%A5%E8%B2%B4/Desktop/html_lesson/html/Visual%20Studio%20Code/2.code%E7%B7%B4%E7%BF%92(HP%E7%89%88)/1.HP_%E3%83%8B%E3%83%A3%E3%83%B3%E3%83%9F%E3%82%AF%E3%83%AA%E3%83%8B%E3%83%83%E3%82%AF/photo/4.jpg');
18}
19
20.main-slick {
21  margin: 0 auto;
22  width: 90%;
23  height: 400px;
24}
25
26.slick h1 {
27  -ms-writing-mode: tb-rl;
28  writing-mode: vertical-rl;
29  padding: 10px;
30  line-height: 44px;
31  font-size: 26px;
32  font-family: serif;
33  position: absolute;
34  top: 20%;
35  left: 7%;
36}
37
38.main-news {
39  position: absolute;
40  right: 10%;
41  top: 480px;
42  width: 54%;
43}
44
45.news {
46  width: 100%;
47  background-color: white;
48  border-radius: 50px;
49  font-size: 20px;
50  font-family: serif;
51  padding: 16px;
52}
53
54.news a {
55  text-decoration: none;
56}
57
58.news a:hover {
59  text-decoration: underline;
60}
61

javascript
1  //mainのslick//
2  $('.main-slick').slick({
3    arrows: false,
4    fade: true,
5    speed: 2000,
6    autoplaySpeed: 4000,
7    autoplay: true,
8  });
9

表示したのはcodeの一部ですので、どこか抜けてたらごめんなさい

Lhankor_Mhy

2020/08/25 08:25

パスに個人情報と思われる内容がありますが、問題ありませんか？

nekomannma

2020/08/26 00:45

わざわざありがとうございます

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

回答1件

ベストアンサー

こんばんは。

idはslickで使うようなので、classに切り替えてはいかがですか？

html
1      <div class="slick slick1">
2        <h1>くつろぎの環境で行う<br>からだに優しい<br>内視鏡検査</h1>
3      </div>
4      <div class="slick slick2">
5        <h1>胃腸と消化器全般の<br>専門医として</h1>
6      </div>
7      <div class="slick slick3">
8        <h1>地元の皆さまの<br>かかりつけ医として</h1>
9      </div>

css
1.slick1 , .slick2 , .slick3{
2    background-image: url('http://placehold.jp/24/cc9999/993333/150x100.png?text=1.jpg');
3    background-size: cover;
4    width: 100%;
5    height: 400px;
6    margin: 0 auto;
7    border-top-left-radius: 50px;
8    border-bottom-right-radius: 50px;
9    position: relative;
10  }
11  
12  .slick2 {
13    background-image: url('http://placehold.jp/24/cc9999/993333/150x100.png?text=9.jpg');
14  }
15  
16  .slick3 {
17    background-image: url('http://placehold.jp/24/cc9999/993333/150x100.png?text=4.jpg');
18  }