スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を変える

2023 4/06

2021/02/25 2023/04/06

スポンサードリンク

「Slick.js」の使い方・カスタマイズ方法

「Slick.js」の使い方・カスタマイズ方法でよくある事例のメモです。

スライドのドットの大きさを変更する

CSSで調整できます。

疑似要素の中身にcontent: “•”;を使ってスライダードットを再現しています。
スライドのドットの大きさはfont-sizeで変化します。
191行目の.slick-dots li button:beforeのfont-sizeを変更します。

.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

スライドのドットの色を変更する

こちらもCSSで調整可能です。
slickのドットの色を変えるには「background-color」を変更します。
デフォルト設定でドットの色にopacityをつけて透明度を下げているためbackground-colorのみ変更しても指定した色味になりません。
透明度を変更させない場合には「opacity:1」を指定します。

slick-activeが有効になっているスライダーのドットです。

.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}