青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

slickを使ったスライダーで、.slick-dotsのdot部分の大きさがおかしいときに調整する方法

f:id:XxGodmoonxX:20191106005534p:plain

このページャー部分となるドット、大きさがおかしいときどうするか。
GoogleChrome DevToolでその部分を見て、

f:id:XxGodmoonxX:20191106005608p:plain

ここのfont-sizeっぽい。

ここの指定が.slick-dots li button:beforeなので、それをそのままエディタにコピペ。

    .slick-dots li button:before {
      font-size: 40px;
    }

みたいに変えてあげると、効きます。

と思いきや効かない。

Chrome DevToolで見てみると、

    /* slick-theme.css */
    .slick-dots li button:before {
        font-size: 6px;
    }
    /* style.css */
    .slick-dots li button:before {
        font-size: 40px;
    }

で、上が優先されています。

ええーって感じなんですけどしょうがないので、もう少し詳細に

/* style.css */
.slick-visual .slick-dots li button:before {
    font-size: 40px;
}

とかまですると効きます。


って解決方法が正しいと思いきや。

f:id:XxGodmoonxX:20191106005809p:plain

なんと、fontを読み込んでいなかった。そういうことか。

kenwheeler.github.io

ここからダウンロードして、そこの中のfontのファイルを適切なディレクトリ(今回は./common/font/)に入れてあげれば解決します。

ここまで書いておいてなんですが上記のエラーはまたちょっと違うエラーかもしれないです、入れても解決しなかった。でもこれでfont-sizeの指定消してあげるとドットの大きさに関しては解決します。