「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画像等)を設置した場合、通常だと全てのスライダー画像の下部に当該コンテンツが表示される筈。これをスライダーの中央画像の下部にのみ表示し、左右の画像の下部は非表示としたいというケースがあった。以下に対応方法をメモ。

サンプル

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

対応方法

ソースコード

<style>
#slider{
    .slick-arrow{
        z-index: 2;
        top: 100px;
    }
    .slick-prev{
        left: 1%;
    }
    .slick-next{
        right: 1%;
    }
    .contents{
        width: 100%;
        background-color: #ccc;
        height: 100px;
        display: none;
    }
    .slick-current .contents{
        display: block;
    }
}
</style>

<main>
    <section>
        <div id="slider">
            <div>
                <div class="img">
                    <img src="../img/001.jpg">
                </div>
                <div class="contents">
                    コンテンツ1
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="../img/002.jpg">
                </div>
                <div class="contents">
                    コンテンツ2
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="../img/003.jpg">
                </div>
                <div class="contents">
                    コンテンツ3
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="../img/004.jpg">
                </div>
                <div class="contents">
                    コンテンツ4
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="../img/005.jpg">
                </div>
                <div class="contents">
                    コンテンツ5
                </div>
            </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-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script>
$(function(){
    $(`#slider`).slick({
        autoplay: true,
        dots: false,
        infinite: true,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true
    });
});
</script>

解説等

「.contents」部分をデフォルトでは非表示とし、中央に来た際に「.slick-current」が付与されるのでそのタイミングで表示させている。

所感

画像の切れ目(サンプルページだと画像1⇔5)の切り替えの際、微妙にコンテンツ部分の表示が遅れる点が少々気になるところ。フェード的なエフェクトを入れて誤魔化等、CSS側で更に調整が必要かも。