【slick】ドットのカスタマイズ方法【画像／プログレスバー】

記事内に広告を含みます

パソ君

・slickでドットインジゲーターをカスタマイズする方法は？

こんな疑問にお答えします。

デザインカンプによっては、slickのドットをカスタマイズする必要がありますよね。

実はそれ簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「ドットインジゲーターをカスタマイズ」について解説していきます！

この記事でわかること

・ドットをカスタマイズ【やり方】
・ドットをカスタマイズ【画像編】
・ドットをカスタマイズ【プログレスバー】

2023年1月24日【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【slick】ドットのカスタマイズ方法【やり方を解説】
【slick】ドットのカスタマイズ方法【画像編】
【slick】ドットのカスタマイズ方法【プログレスバー編】
【slick】ドットのカスタマイズ方法【画像／プログレスバー】：まとめ

【slick】ドットのカスタマイズ方法【やり方を解説】

実際にドットインジゲーターをカスタマイズしたサンプルがこちら↓

See the Pen slickドットインジゲーター➀ by jito-coder (@jito-coder) on CodePen.

<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>

.dots-class button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.dots-class {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.dots-class li {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border: 1px solid #000066;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color .5s ease;
}
.dots-class li.slick-active {
    background-color: #000066;
}
.dots-class li:hover {
    background-color: #000066;
}
.dots-class li:last-child {
    margin-right: 0;
}

$(function () {
    $(".test-slick").slick({
        arrows: false,
        dots: true,
        dotsClass: 'dots-class',
    });
});

コードの重要な点がこちら↓

jQueryにてドットを有効化＋クラス付与
デフォルトのボタンを非表示に
liタグに対して装飾

順に見ていきましょう。
（色んな装飾方法がありますので一例として参考に）

➀：jQueryにてドットを有効化＋クラス付与

$(function () {
    $(".test-slick").slick({
        arrows: false,
        dots: true,
        dotsClass: 'dots-class',
    });
});

まずjQueryにてドットを有効化します。デフォルトだと非表示になってますからね。

「dots: true,」を指定。これでドットが表示されました。

そしたらこのドットに対してCSSを当てるために、クラスを付与します。

「dotsClass: ‘dots-class’,」を指定。これで「dots-class」というクラスがつきました。

ジト

クラス名は任意です！

➁：デフォルトのボタンを非表示に

ドットを有効化すると、下記のように数字になります↓

そのためこのデフォルトのボタンを非表示にしましょう。

.dots-class button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

outlineやborderに対しても消しておきます。

➂：liタグに対して装飾

あとは新しくカスタマイズしたドットを作成すればOKです。

有効化したドットは、下記のようなタグで生成されます↓

親要素はulタグ
ulのクラス名はjQueryで指定したもの
子要素はliタグ
子要素の表示してるスライドに「slick-active」クラスがつく

上記らの特徴を生かしてCSSを当てていきましょう。

それが下記コードですね↓

// ドットを囲む親要素
.dots-class {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

// それぞれのドット
.dots-class li {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border: 1px solid #000066;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color .5s ease;
}

// 今表示してるスライドのドット
.dots-class li.slick-active {
    background-color: #000066;
}

// それぞれのドットのホバー時
.dots-class li:hover {
    background-color: #000066;
}

.dots-class li:last-child {
    margin-right: 0;
}

これでドットインジゲーターをカスタマイズすることができました！

【slick】ドットのカスタマイズ方法【画像編】

ドットインジゲーターを画像で反映したいときもありますよね。

そのサンプルがこちらです↓

See the Pen slickドットインジゲーター➁ by jito-coder (@jito-coder) on CodePen.

// それぞれのドット
.dots-class li {
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}
.dots-class li::before {
    content: "";
    display: inline-block;
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/hukidashi_02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 53px;
    padding-top: 43px;
    transition: background-image .5s ease;
}
// 今表示してるスライドのドット
.dots-class li.slick-active::before {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/3bfb67d2416d7704f388fc0d28830ee8.png);
}
// それぞれのドットのホバー時
.dots-class li:hover::before {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/3bfb67d2416d7704f388fc0d28830ee8.png);
}

.dots-class li:last-child {
    margin-right: 0;
}

liタグに対して疑似要素を実装して、背景画像を使い反映しております。

【slick】ドットのカスタマイズ方法【プログレスバー編】

ドットをプログレスバーにしたいときもありますよね。

そんなときのサンプルがこちら↓

See the Pen slickドットインジゲーター➂ by jito-coder (@jito-coder) on CodePen.

.dots-class li::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
}
// 今表示してるスライドのドット
.dots-class li.slick-active::before {
    background-color: #000066;
    animation: progressbar-anime 4.5s linear forwards;
}

@keyframes progressbar-anime {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

$(function () {
    $(".test-slick").slick({
        arrows: false,
        dots: true,
        dotsClass: 'dots-class',
        autoplay: true,
        autoplaySpeed: 4500,
        pauseOnHover: false,
    });
});

疑似要素を使って線を作成。

あとはslick-activeクラスがついたものに対して、新たな線が横から伸びてくるアニメーションを指定すれば実装できます。

注意点は秒数ですね。

cssアニメーションの秒数と、autoplaySpeedの秒数を同じにしましょう。

今回は例として、両方4.5秒にしておきました。

animation: progressbar-anime 4.5s linear forwards;

autoplaySpeed: 4500,

これで良い感じに反映できます。