「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタン)を設定してもボタンが表示されないというケースがあった。ブラウザの開発者ツールで見てみると描写はされているみたいだけどブラウザ上には表示されない状態っぽい。CSSを調整することで解決したので以下に対応方法をメモ。

サンプル

https://taitan916.info/sample/slick/arrows_display/

対応方法

ソースコード

<style>
#slider_1{
    .slick-arrow{
        z-index: 2;
        top: 100px;
    }
    .slick-prev{
        left: 1%;
    }
    .slick-next{
        right: 1%;
    }
}
</style>

<main>
    <section>
        <b>ボタンが表示されるパターン</b>
        <div id="slider_1">
            <div><img src="../img/001.jpg"></div>
            <div><img src="../img/002.jpg"></div>
            <div><img src="../img/003.jpg"></div>
            <div><img src="../img/004.jpg"></div>
            <div><img src="../img/005.jpg"></div>
        </div>
    </section>
    <section>
        <b>ボタンが表示されないパターン</b>
        <div id="slider_2">
            <div><img src="../img/001.jpg"></div>
            <div><img src="../img/002.jpg"></div>
            <div><img src="../img/003.jpg"></div>
            <div><img src="../img/004.jpg"></div>
            <div><img src="../img/005.jpg"></div>
        </div>
    </section>
</main>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<script>
$(function(){
    $(`#slider_1, #slider_2`).slick({
        dots: true,
        infinite: true,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true
    });
});
</script>

解説等

「.slick-prev」のleft、「.slick-next」のrightの位置を調整するのと「.slick-arrow」のz-indexを指定すること。