jQueryのslickのドットが表示されないときの対処法

jQueryで簡単にスライドショーが実装できるのがslickプラグインです。
簡単にスライドショーが実装できるので、重宝されています。

しかし、実装してみると、本来表示されるはずのドットが表示されないことがあります。

今回は、jQueryのslickでドットが表示されないときの対処法を書いていきます。

Slickのドットが表示されない原因

slick-theme.cssファイルは初期値だと次のようになっています。

@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}

‘./fonts/…‘というパスがたくさんあります。つまり、fontsフォルダがslick-theme.cssと同じところに設置されている必要があります。

しかし、fontsフォルダを導入していなかったり、配置が違っていたりするとSlickのドットが表示されません。

解決方法

方法その①

slick-theme.cssと同じところにfontsフォルダを入れる

これが一番簡単な方法です。
slick-theme.cssがcssフォルダに入っているとすると、同じcssフォルダにfontsフォルダを入れます。

方法その②

slick-theme.cssのfontsフォルダへのパスを書き換える

パスはフォルダ構成によって異なります。書き方がわからない方は「相対パス」などで検索してください。

まとめ

slickはCDNで読み込んだ場合はあまり問題にならないのですが、ファイルをダウンロードして読み込んだ場合はパスの問題が出てきます。

公式サイトでもあまり言及されていないようなので、当記事が参考になれば幸いです。