読者です 読者をやめる 読者になる 読者になる

SublimeなLife日記

少しでも素晴らしい生活をおくるために、日々、気になったことを。

jQueryプラグイン「slick」で矢印が出ない時の対処法

kenwheeler.github.io

カルーセルのプラグインは、2015年現時点で、軽量でfadeにも対応しているslick.jsがベストだと思います。導入時につまずいたことをメモ。

jQueryカルーセルプラグイン「slick」で矢印が出ない!?

まずはファイルが足りない場合

矢印はデフォルトでtrueになっているので、矢印が出ない場合は、ファイルを全部読み込んでいるか確認する。

「slick-theme.css」が無いと、矢印や、カルーセルの下のドットが正しく表示されないので、かならず読み込む。紹介しているブログによってはこのcssを読み込むソースの記述がないこともあるので注意。

次に、矢印は画像ではなくてフォントで出しているので、「fonts」フォルダの中身も読み込む。

背景色の指定がなくて気づかないだけの場合

ボタンはフォントイメージであるということは既に記述しましたが、デフォルトではcolor: white;になっていました。

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

colorを任意の色に変更するか、もしくはカルーセルのwrapに背景色を指定してあげると、矢印が「見える」ようになります。
誰かの役に立つでしょうか。

関連するエントリー

sublimelife.hatenablog.com