slick導入後、スライドができず空白が出来てしまいます。

HTML
1<!DOCTYPE html>
2<html lang="ja" prefix="og: http://ogp.me/ns#">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2">
6  <link rel="stylesheet" href="practice13.css" type="text/css">
7  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.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<main>
17    <div id="section1">
18      <div class="inner">
19        <div class="slider">
20          <div class="slide01">
21            <img class="img01" src="https://writer-station.com/img/front/pc_img/slider03.svg?1578457100" alt="">
22            <p class="slide-text01">業界最高レベルの報酬をGET!!<br>ご紹介する仕事のすべてが自社案件。<br>お支払いも編集部から直接振込。
23              <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
24            </p>
25          </div>
26          <div class="slide02">
27            <img class="img02" src="https://writer-station.com/img/front/pc_img/slider01.svg?1578457100" alt="">
28            <p class="slide-text02">ライター経験者はもちろん、未経験の方も大歓迎！<br><span class="attention">※応募時に課題文を提出いただき合否の判定をいたします。</span>
29              <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
30            </p>
31          </div>
32          <div class="slide03">
33            <img class="img03" src="https://writer-station.com/img/front/pc_img/slider02.svg?1578457100" alt="">
34            <p class="slide-text02">編集部がしっかりサポート。<br>働きながらWEBライティングを学べます。
35              <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
36            </p>
37          </div>
38        </div><!--slider-->
39      </div>
40    </div>

CSS
1#section1 {
2  margin: 0;
3  position: relative;
4  padding: 0;
5}
6.slider {
7  position: relative;
8  display: block;
9  margin: 0;
10  padding: 0;
11}
12.slide01, .slide02, .slide03 {
13  border: 1px solid red;
14  width: 90%;
15  padding: 0 0 0% 0;
16  margin: 0;
17  text-align: center;
18}
19.slide01 img, .slide02 img, .slide03 img {
20  width: 80%;
21  text-align: center;
22  padding: 7% 0 0 10%;
23  margin: 0;
24  position: relative;
25}
26.slide-text01, .slide-text02, .slide-text03 {
27  margin: 0;
28  padding: 0;
29  display: inline-block;
30  position: absolute;
31  left: 13%;
32  font-weight: 900;
33  font-size: 1.5rem;
34  text-align: left;
35}
36.gray {
37  color: #5A5A5A;
38  font-size: 1rem;
39}

jQuery
1<script>
2$(function() {
3    $('.slider').slick({
4      infinite: true,
5　　
6    });
7  });
8</script>

前提・実現したいこと

模写でslickの実装をしているのですが、slickを実行するとなぜか大きな空白ができてしまいます。(cssで縦に画像を並べたあと)
slickを導入すると勝手に画像が同じ場所に集まりスライドをすると思っていたのですが違うのでしょうか？
何が原因かを知りたいです。

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

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

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

回答2件

ベストアンサー

HTMLをCSSを修正したらできると思います。

HTML

<head>でslick用のCSSを読み込む。
slick.cssはカルーセルのレイアウトを組んでくれるもの、slick-thtemeはスライドを前後に切り替えるボタンなどのUIをスタイリングをしてくれるものです。

html
1<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
2<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

slickの使い方は公式サイトの「Getting Started」にそのまま書いてあります。
slick - the last carousel you'll ever need

CSS

レイアウトを組むだけなら以下のCSSのコードでできると思います。
.innerで最大幅を指定しないと、画像がこの幅より小さかった場合に余白ができます。
また、各スライドの画像の大きさも.innerの幅に合わせて伸縮するように指定しました。

元サイトでは、画像ごとに個別に大きさを調整していますが、そちらについていはご自身でやってみてください。

css
1#section1 {
2  margin: 0;
3  position: relative;
4  padding: 0;
5}
6// 元サイトを見て最大幅を指定
7.inner {
8  max-width: 1040px;
9  margin: 0 auto;
10}
11.slide01, .slide02, .slide03 {
12  position: relative;
13}
14// 各スライドの画像の大きさを揃える
15.slide01 img, .slide02 img, .slide03 img {
16  max-width: 100%;
17  max-height: 600px;
18}
19.slide-text01, .slide-text02, .slide-text03 {
20  position: absolute;
21  left: 0;
22  top: 0;
23  font-weight: 900;
24  font-size: 1.5rem;
25  text-align: left;
26}
27.gray {
28  color: #5A5A5A;
29  font-size: 1rem;
30}
31// カルーセルのボタンカラーを変更
32.slick-prev::before,
33.slick-next::before {
34  color: skyblue !important;
35}

サンプルコード

投稿2020/02/22 01:43

shgtkshruch

総合スコア665

セレクタ部分で「.」が抜けているようです。以下のようにして一度試してみてもらえますか？

jQuery
1<script>
2$(function() {
3    $('.slider').slick({
4      infinite: true,
5　　
6    });
7  });
8</script>

投稿2020/02/21 16:21

KimTom

総合スコア134

katusi

2020/02/21 16:24

回答ありがとうございます。試したのですが、ダメでした。 slickの導入に問題があるのでしょうか？

KimTom

2020/02/21 16:55

改めてコードを見させていただきました。２箇所修正する必要があります。以下の通りにしてみてください。１．slick用のcssファイルを読み込む <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> jsファイルと一緒にcssファイルを読み込む必要があります。head内に上記コードを追加してください。２．.slider は display:block; にする .slider { position: relative; display: block; margin: 0; padding: 0; } これでどうでしょうか。

katusi

2020/02/21 21:58

回答ありがとうございます。こちらも上手くいきませんでした。 slideするのですが、slide1,slide2,slide3が同時にスライドされます。縦に3つの画像が並んでそれが同時にされる感じです。つまりslideの２枚目と３枚目が空白になります。あと画像が表示されず文字だけが表示されます。やはり、導入部分に間違いがあるのでしょうか？

KimTom

2020/02/22 05:18

slickが動作しているということは導入は問題ないということです。あとはCSS部分を修正すればOKだと思います。 shgtkshruchさんがデザイン調整まで含めてサンプルコードを書いてくださっているのでぜひそちらを参考にしてみてください！

katusi

2020/02/22 13:36

何度もありがとうございました！解決できました。

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

あなたの回答