Travelogue

カルーセルスライダーslickの前後ボタンが表示されない原因と対処法

公開日：

カルーセルスライダーとして有名なslickというjQueryプラグインをたまに使う機会があるのですが、ほんとにたまーにしか使わないので、久々に使う時にとりあえず適当にそのまま設置してみると、スライダーの前後の画像へ移動するボタン（PREVとNEXT）が表示されなくて微妙に面倒くさかったりしてまして、最近も「あれ？」ってなってちょっとだけハマりました。それで、よく考えると前にも似たようなことがあったな・・・とか思い出してました。

今後もおそらくたまーに使うことがありそうなプラグインなので、同じようにしてハマらないためにこのPREVとNEXTが表示されないケースとその対処方法についてメモっとこうと思います。
この前後への矢印アイコンが表示されない原因で今思いついてるのは以下の4つです。

  • 矢印アイコンがボックスの外に追いやられてる
  • 矢印アイコンがスライドする画像の下に隠れている
  • 矢印の色が白色になっているので背景の白と同化していて見えないだけ
  • そもそもslickのfontsフォルダを設置し忘れている

矢印アイコンがボックスの外に追いやられてる

このPREVとNEXTの矢印アイコンはpositionプロパティで配置されてます。slick-theme.cssの中の以下がその配置場所の設定です。

.slick-prev
{
    left: -25px;
}
.slick-next
{
    right: -25px;
}

これは、PREVボタンは基準となるボックスの左端からさらに左側に25pxの場所、NEXTボタンは基準となるボックスの右端からさらに右側に25pxの場所に配置されること意味します。
つまり基準となるボックスの外側に配置されるようになっているわけです。

この基準となるボックスがブラウザのウィンドウ幅いっぱいに広がっているボックスだった場合、矢印アイコンはその枠のさらに外側にあって非常に分かりづらいです。変な横スクロールが発生してたりして気がつくことがあります。

例えば以下のような値に変更してみると、矢印は枠の中に表示されるようになります。

.slick-prev
{
    left: 50px;
}
.slick-next
{
    right: 50px;
}

矢印アイコンがスライドする画像の下に隠れている

どういうわけか画像とアイコンの重なりがうまくいかなくて、アイコンがスライドする画像の下になってる時がありました。
これの対策は単純に矢印アイコンのレイヤーを上のほうに持って来ればOKです。

.slick-prev,
.slick-next
{
    z-index: 100;
}

これらのアイコンはもともとpositionプロパティにabsoluteが指定されてるのでそのままz-indexを指定できます。

矢印の色が白色になっているので背景の白と同化していて見えないだけ

矢印のアイコンはデフォルトだと白色になってます。そのため、スライダーの画像が白っぽかったりする場合は矢印アイコンが見えにくくて、実際は表示されてるのに表示されてないと勘違いしてしまうことがあります。

試しに濃い色の画像を使ったり背景に色をつけてみたりして確認してみるとすぐに確認できます。
また、矢印の色を変更する場合は、slick-theme.cssの以下が矢印の色の指定なので、これを変更すると良いでしょう。

.slick-prev:before,
.slick-next:before
{
    color: white;
}

そもそもslickのfontsフォルダを設置し忘れている

slickをダウンロードしてきたファイル一式の中に「fonts」というフォルダがあると思います。
この矢印アイコンは画像ではなくてアイコンフォントで表示されてるものなので、そもそもこのfontsフォルダを設置してないと矢印は表示されません。
slick-theme.cssと同じ場所にこのfontsフォルダを置きます。

原因のほとんどはslick-theme.cssにあり？

slickのオプションにある「arrrows」は初期値がtrueなので、わざわざ指定しなくても最初から前後への矢印は表示される設定になっています。

前後ボタンが表示されない原因はほとんどがslick-theme.css関連になるのかなと思います。
そのため何故かうまくいかなかったら一旦試しにslick-theme.cssの読み込みを外してみましょう。

そうするとスライダー画像の上下に「Previous」「Next」というブラウザ標準の見た目のボタンが出てきませんか？これが出てきたらボタンは出てるということですので、あとはcssによる見た目の設定をなんとかすれば解決できるはずです。

Pagetop