slickスライダーの前後ボタンが表示されない原因と対策

サンプル(slickスライダーの前後ボタンがきちんと表示されているもの)

※サンプルは以下の記事と同じもの。

スライダーに背景画像を付けて、その両サイドをぼかす(モザイクをかける)方法

jQueryのslickでスライダーを作るとスライドを前後に送るボタンが表示されないときがあるので、その原因と対処方法。

結論としては、以下のようにCSSを記述するとボタンがきちんと表示されるようになる(ボタンが表示されたスライダーは冒頭のサンプルを参照)。

/*
    スライダーの設定
*/
.slider .slick-prev
{
    /* デフォルトでは-25px(= スライダーの外側) */
    left: 10px;
}
.slider .slick-next
{
    /* デフォルトでは-25px(= スライダーの外側) */
    right: 10px;
}

.slider .slick-prev,
.slider .slick-next
{
    /* スライド画像の後ろに隠れないようにする */
    z-index: 100;
}

.slider .slick-prev::before,
.slider .slick-next::before {
    /* フォントと色の設定はbefore内で行う */
    /* font-size: 28px; */
    /* color: black; */
}

参考サイトは以下の通り。

slickスライダーの前後ボタンが表示されない原因と対策

ボタンが画面外に飛び出ている

slickのcss(slick-theme.css)を見ると、デフォルトでは前後ボタンは「スライダーの外側」に設置されている。

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

つまり、スライダーを画面幅一杯に広げているとボタンは画面外に飛び出してしまうので、画面内に収まるように値を変えてやればOK(冒頭のCSSを参照)。

スライド画像の後ろに隠れている

画面内に収まっていても前後ボタン自体がスライド画像よりも後ろに隠れている場合もある。

前後ボタンのz-indexの値を大きくしてスライド画像よりも手前に表示されるようにすればOK(冒頭のCSSを参照)。

背景と同化している

前後ボタンの色はデフォルトでは「透過」なので、背景色によっては非常に見えにくい。

.slick-prev,
.slick-next
{
    color: transparent;
}

::before内で色を設定しれやればOK(冒頭のCSSを参照)。

CSSが反映されていない

上記のような設定をしてもボタンが表示されない場合はCSSが反映されていない可能性も考えられる。

CSSには適用には

• 後から読み込まれたCSSが優先される
• セレクタには点数があり、点数が多い方が優先される(参考)

といった優先順位があるので、自作のCSSの前後ボタンの設定を記述してもそれが適用されないと当然ボタンにも反映されない。

解決方法としては、

• !importantを付ける
• slick-theme.cssよりも自分のCSSを後に読み込む
• 自分のCSSのセレクタの点数が高くなるようにする

などが考えられるが、

• !importantは優先順位のルールを無視して最優先にしてしまうので、気軽に使うべきではない
• 自分のCSSを後に読み込むことで、slick-theme.cssの別の設定が適用されなくなる可能性がある

といった理由により、自作のCSSの点数が高くなるように記述するのが良いと思う。

具体的には以下のような感じ(完成したものは冒頭のCSSを参照)。

/* クラス名を2つ重ねることで、slick-theme.cssよりも優先順位を上げる */
.slider .slick-prev
{
    left: 10px;
}

/* この場合は、自分のCSSをslick-theme.cssよりも後に読み込んだ場合に有効となる */
.slick-prev
{
    left: 10px;
}