「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいというケースがあった。PHPが利用可能な環境であれば画像と一緒に順位も表示し、それをCSSで対応するような形を検討するがASPを用いたサイトのためPHPは利用不可だった。そのためCSSのみで対応する方法をメモ。

サンプル

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

スライダー画像右上に「〇位」と表示されるのが確認できる筈。

対応方法

ソースコード

<style>
body{
    counter-reset: number 0;
}
#slider{
    .slick-slide{
        position: relative;
    }
    .slick-slide::before{
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 1rem;
        content: counter(number) '位';
        counter-increment: number 1;
        position: absolute;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
}

</style>

<div id="slider">
    <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>

<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({
        dots: true,
        infinite: false,
        slidesToShow: 1,
        centerMode: false,
        variableWidth: true
    });
});
</script>

解説等

infiniteをtrue(スライドのループを有効)にすると順位がずれるので注意すること。

リファレンス

counter()

https://developer.mozilla.org/ja/docs/Web/CSS/counter

counter-increment

https://developer.mozilla.org/ja/docs/Web/CSS/counter-increment