slickを導入したんですが使えないです。

html
1<!DOCTYPE html>
2<html lang="ja" prefix="og: http://ogp.me/ns#">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="practice13.css" type="text/css">
6  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
7  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
9  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
10  <script async src="https://platform.twitter.com/widgets.js"></script>
11  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
12  <title>practice13</title>
13</head>
14
15<body>
16  <header>
17    <div class="inner">
18      <img class="header-logo-back" src="https://writer-station.com/img/front/pc_img/bg_wave.svg?1578457100" alt="">
19      <div class="header-logo">
20        <a href="https://writer-station.com/">
21          <img src="https://writer-station.com/img/front/pc_img/logo_ttl_white.svg" alt="">
22          <p>WRITER STATION<br><span class="big">ライターステーション</span><p></a>
23      </div>
24      <div class="header-sub">
25        <a class="subcribe" href="https://writer-station.com/entry"><span class="blue"><i class="far fa-circle"></i></span>登録はこちら</a>
26        <a class="blog" href="https://writer-station.com/entry"><span class="blue"><i class="fas fa-pencil-ruler"></i></span>ブログ</a>
27        <a class="login" href="https://writer-station.com/entry"><span class="blue"><i class="fas fa-lock-open"></i></span>ログイン</a>
28      </div>
29      <div class="header-menu">
30        <ul>
31          <li><a href="https://writer-station.com/#overview">▽仕事の概要</a></li>
32          <li><a href="https://writer-station.com/#overview">▽案件例</a></li>
33          <li><a href="https://writer-station.com/#overview">▽対象とする人</a></li>
34          <li><a href="https://writer-station.com/#overview">▽仕事の流れ</a></li>
35          <li><a href="https://writer-station.com/#overview">▽サポート体制</a></li>
36          <li><a href="https://writer-station.com/#overview">▽先輩登録者の声</a></li>
37          <li><a href="https://writer-station.com/#overview">▽Q＆A</a></li>
38        </ul>
39      </div>
40      <div id="page_top"><a href="#"><i class="fas fa-angle-up"></i></a></div>
41    </div>
42  </header>
43
44  <main>
45    <div id="section1">
46      <div class="inner">
47        <div class="slider">
48          <div class="slide01">
49            <img class="img01" src="https://writer-station.com/img/front/pc_img/slider03.svg?1578457100" alt="">
50            <p class="slide-text01">業界最高レベルの報酬をGET!!<br>ご紹介する仕事のすべてが自社案件。<br>お支払いも編集部から直接振込。
51              <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
52            </p>
53          </div>
54          <div class="slide02">
55            <img class="img02" src="https://writer-station.com/img/front/pc_img/slider01.svg?1578457100" alt="">
56            <p class="slide-text02">ライター経験者はもちろん、未経験の方も大歓迎！<br><span class="attention">※応募時に課題文を提出いただき合否の判定をいたします。</span>
57              <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
58            </p>
59          </div>
60          <div class="slide03">
61            <img class="img03" src="https://writer-station.com/img/front/pc_img/slider02.svg?1578457100" alt="">
62            <p class="slide-text02">編集部がしっかりサポート。<br>働きながらWEBライティングを学べます。
63              <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
64            </p>
65          </div>
66        </div><!--slide-->
67      </div>
68    </div>
69</main>
70
71</body>
72</html>

css
1#page_top {
2  width: 50px;
3  height: 50px;
4  position: fixed;
5  right: 2.5%;
6  bottom: 50px;
7  background: #B4E3F9; /*ボタンの色*/
8  opacity: 0.7;
9  border-radius: 50%; /*角の丸み*/
10  z-index: 1005;
11}
12  #page_top a {
13  font-family: "Font Awesome 5 Free";
14  content: "\f102"; /*アイコン*/
15  font-weight: 900;
16  font-size: 25px;
17  color: #fff; /*アイコンの色*/
18  position: absolute;
19  width: 25px;
20  height: 25px;
21  top: 0;
22  bottom: 0;
23  right: 0;
24  left: 0;
25  margin: auto;
26  text-align: center;
27}
28#section1 {
29  margin: 0;
30  position: relative;
31  padding: 0;
32}
33.slider {
34  position: relative;
35  display: inline-block;
36}
37.slide01 img, .slide02 img, .slide03 img {
38  border: 2px solid red;
39
40}
41.slide-text01, .slide-text02, .slide-text03 {
42
43  margin: 0;
44  padding: 0;
45  top: 100px;
46  left: 200px;
47
48}

js
1<script>
2  $(function() {
3    var pagetop = $("#page_top");
4    pagetop. hide();
5
6    $(window).scroll(function () {
7      if ($(this).scrollTop() > 500) {
8        pagetop.fadeIn();
9      } else {
10        pagetop.fadeOut();
11      }
12    });
13    pagetop.click(function () {
14     $('body, html').animate({ scrollTop: 0 }, 800);
15     return false;
16  });
17  });
18  $(function() {
19    $('.slider').slick({
20
21    });
22  });
23
24</script>

前提・実現したいこと

今現在模写をしていて、jQueryを使い画像のスライドを作りたいのですが、上記のように書いたところ何も変わりません。
あとsliderの中の文字を画像の左上に固定してそれも画像と同時に切り替えしたいです。
pagetopにいくボタンは適応できたのですが、slickだけできません。

補足情報（FW/ツールのバージョンなど）

元のサイトのURLは(https://writer-station.com/)です。
よろしくお願いいたします。

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

回答1件

ベストアンサー

現状だと

html
1<div class="slider">
2          <ul>
3            <li class="slide01">
4              <img class="img01" src="https://writer-station.com/img/front/pc_img/slider03.svg?1578457100" alt="">
5              <p class="slide-text01">業界最高レベルの報酬をGET!!<br>ご紹介する仕事のすべてが自社案件。<br>お支払いも編集部から直接振込。
6                <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
7              </p>
8            </li>
9            <li class="slide02">
10              <img class="img02" src="https://writer-station.com/img/front/pc_img/slider01.svg?1578457100" alt="">
11              <p class="slide-text02">ライター経験者はもちろん、未経験の方も大歓迎！<br><span class="attention">※応募時に課題文を提出いただき合否の判定をいたします。</span>
12                <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
13              </p>
14            </li>
15            <li class="slide03">
16              <img class="img03" src="https://writer-station.com/img/front/pc_img/slider02.svg?1578457100" alt="">
17              <p class="slide-text02">編集部がしっかりサポート。<br>働きながらWEBライティングを学べます。
18                <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
19              </p>
20            </li>
21          </ul>
22        </div><!--slide-->

の部分で、

html
1<div class="slider"><!-- スライド全体 -->
2  <div>
3    <div class="slide1"></div> <!--  スライド内容 -->
4    <div class="slide2"></div> <!--  スライド内容 -->
5  </div>
6</div>

のような形になってしまっているのが、原因です。
ですので、

html
1<div>
2  <div class="slider"><!-- スライド全体 -->
3    <div class="slide1"></div> <!--  スライド内容 -->
4    <div class="slide2"></div> <!--  スライド内容 -->
5  </div>
6</div>

のような形でslickについて反応すると思います。

投稿2020/02/20 16:18

jackmiwamiwa

総合スコア395

katusi

2020/02/20 16:50

回答ありがとうございます。上記のように修正したのですが、変わりませんでした。 jsの問題でしょうか？

jackmiwamiwa

2020/02/20 17:08

jQueryの読み込みの下に https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js が質問のコード上にないのが原因だと思います。

katusi

2020/02/20 22:39

ありがとうございます。導入できました。もう一つ質問なのですが、導入後のcssで何をどうしても上手くいきません。画像が来るべきところに大きな空白ができてしまいます。画像自体はnextボタンを押しても3つのうち1つしか表示されず、画面左に大きく外れています。あと、slick導入すると自動で画像が重なると思っていたのですがされません。どうすれば良いでしょうか？何度すみません。

jackmiwamiwa

2020/02/21 00:35

cssについては優先度の問題ですので、 .inner .slider のようにネストを深くするか!importantを使えば反応します。また、画像が重なる件については $('.className').slick({ fade: true }); のようにfadeの設定を行えばできます。詳しい使い方はこちらに書いてあるので、見てください。 https://kenwheeler.github.io/slick/

katusi

2020/02/21 12:41

回答ありがとうございます。自分でトライして見ます。

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