jQueryプラグイン「slick」で矢印が出ない時の対処法
カルーセルのプラグインは、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に背景色を指定してあげると、矢印が「見える」ようになります。
誰かの役に立つでしょうか。
