【簡単実装！】Slickでdotsの位置やデザインをカスタマイズする方法

ウェブサイトのスライダーのドットを自在にカスタマイズしたいと思ったことはありませんか？
「Slick」を使えば、簡単にスライダーを作成できます。本記事では、Slickのdots（ドット）の位置やデザインをカスタマイズする方法について、初心者にもわかりやすいよう解説します。

Slickとは

Slickは、JavaScriptで作られた軽量で使いやすいスライダープラグインです。画像やコンテンツをスライド形式で表示するのに最適で、多くのオプションやカスタマイズ機能があります。
Slickの導入方法から詳しく知りたい方は、以下の記事を参照してください。

【Slick / 初心者向け】WordPressにスライダーを導入する方法

また、Slickのarrowsの位置やデザインをカスタマイズする方法については以下の記事でご紹介していますので、興味のある方はご覧ください。

【簡単実装！】Slickでarrowsの位置やデザインをカスタマイズする方法

Slickのdotsとは

Slickのdotsは、スライダーの現在の位置を示すための小さな丸いマークです。通常、スライダーの下部に配置され、クリックすることで特定のスライドに移動することができます。

Slickのdotsの形をカスタマイズするには

Slickのdotsの形をカスタマイズするには、まずはdotsデフォルトのクラス名からオリジナルのクラス名に変更します。そうするとslick-theme.cssの影響が少なく済み、カスタマイズが格段に楽になります。
Slick内をカスタマイズするので、slickを動かすためのコード内に記述します。

$('.slick-slider').slick({
    dots: true,
    dotsClass: 'dots-wrap', // dotsデフォルトのクラス名からdots-wrapに変更
});

これで下準備ができました。

丸くするには

オリジナルのクラス名にしたdotsを丸くするには、CSSを使います。以下のコードを参考にしてください。

/* dotsを丸くカスタマイズするCSS */
.dots-wrap {
    display: flex;
    justify-content: center;
}

.dots-wrap li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: coral;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

CSSの解説

このCSSでは、以下のようにdotsをカスタマイズしています。

• .dots-wrap はdotsを中央に配置するために display: flex; と justify-content: center; を設定。
• .dots-wrap li は、各dotのスタイルを設定。幅と高さを 10px にし、border-radius: 50%で角を取って丸い形に調整。背景色は白色にし、dotsの間にマージンも追加。
• .dots-wrap li:hover と .dots-wrap li.slick-active では、マウスオーバー時およびアクティブなdotの背景色をコーラルに変更。
• .dots-wrap li button では、ボタンのデフォルトのスタイルをリセットし、ボタンの表示を none に設定。

このCSSを適用することで、Slickスライダーのdotsが正方形になり、マウスオーバーやアクティブ時に色が変わる効果を実現できます。

正方形にするには

dotsを四角くカスタマイズするには、CSSを使います。以下のコードを参考にしてください。

/* dotsを四角くカスタマイズするCSS */
.dots-wrap {
    display: flex;
    justify-content: center;
}

.dots-wrap li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #fff;
    cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: coral;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

CSSの解説

このCSSでは、以下のようにdotsをカスタマイズしています。

• .dots-wrap はdotsを中央に配置するために display: flex; と justify-content: center; を設定。
• .dots-wrap li は、各dotのスタイルを設定。幅と高さを 10px の正方形にし、背景色を白に設定。また、dotsの間にマージンも追加。
• .dots-wrap li:hover と .dots-wrap li.slick-active では、マウスオーバー時およびアクティブなdotの背景色をコーラルに変更。
• .dots-wrap li button では、ボタンのデフォルトのスタイルをリセットし、ボタンの表示を none に設定。

このCSSを適用することで、Slickスライダーのdotsが正方形になり、マウスオーバーやアクティブ時に色が変わる効果を実現できます。

長方形にするには

正方形にする方法と基本的に同じですが、.dots-wrap liのwidthとhieghtで長方形になるように調節します。こちらのコードをお試しください。

.dots-wrap {
    display: flex;
    justify-content: center;
}

.dots-wrap li {
    width: 40px;
    height: 4px;
    margin: 0 5px;
    background: #fff;
    cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: coral;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

CSSの解説

• .dots-wrap には、dotsを中央に配置するために display: flex; と justify-content: center; を設定。
• .dots-wrap li は、各dotのスタイルを設定しています。幅40px、高さ4pxの長方形に設定。背景色を白にし、dotsの間にマージンを追加。
• .dots-wrap li:hover と .dots-wrap li.slick-active では、マウスオーバー時、およびアクティブなdotの背景色をコーラルに変更。
• .dots-wrap li button では、ボタンのデフォルトのスタイルをリセットし、ボタンの表示を none に設定。

Slickのdotsを縦並びにするには

メインビジュアルのスライダーでは、dotsが縦並びでslick上に配置されている場合があります。その場合はこのようなCSSを使えば簡単に実現できます。

.dots-wrap {
    margin: 0;
    position: absolute;
    right: 20px;
    bottom: 25px;
}

.dots-wrap li {
    width: 10px;
    height: 10px;
    background-color: coral;
    border-radius: 50%;
    margin-bottom: 10px;
    cursor: pointer;
    opacity: 0.45;
}

.dots-wrap li.slick-active,
.dots-wrap li:hover {
    opacity: 1;
}

.dots-wrap li:last-child {
    margin-bottom: 0;
}

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

CSSの解説

• .dots-wrap は、スライダー内での位置をposition: absolute;で設定。slickは親要素にposition: relativeがついているのでこれでOK。
• .dots-wrap li は、各dotのスタイルを設定。幅と高さを 10px にし、丸くするために border-radius: 50%; を適用。さらに、dotsの間にマージンを追加し、マウスオーバーやアクティブな状態での透明度を変えるために、デフォルトでは透明度を 0.45 に設定。
• .dots-wrap li.slick-active と .dots-wrap li:hover では、マウスオーバー時およびアクティブなdotの透明度を 1 に変更。
• .dots-wrap li:last-child では、最後のdotのマージンを0に設定。（配置しやすくするため）
• .dots-wrap li button では、ボタンのデフォルトのスタイルをリセットし、ボタンの表示を none に設定。

Slickのdotsを任意のタグに入れるには

デフォルトでは、dotsはスライダーの直下に表示されますが、任意のタグに入れ、自由度を高めることも可能です。以下のようにHTMLとJavaScriptを変更します。

<!-- dotsを表示させたい位置にHTMLを追加 -->
<div class="dots-box"></div>

$('.slick-slider').slick({
    dots: true,
    dotsClass: 'dots-wrap',
    appendDots: $('.dots-box') // dotsを.dots-boxに挿入
});

appendDotsとは

appendDotsオプションは、dotsが追加される要素を指定します。このオプションを使用すると、デフォルトの位置ではなく、任意の場所にdotsを配置することができます。通常、dotsはSlickスライダーの下部に配置されますが、このオプションを使うことでスライダーのレイアウトをより柔軟にカスタマイズすることができてるようになります。初期化時に目的の要素を指定するだけで簡単にdotsの位置を変更できるため、様々なデザイン要件に対応することができます。

デモ

codepenで実際どの程度変わるのか確認できます。

See the Pen
slickでdotsのカスタマイズ by GROWORKS (@groworks)
on CodePen.

まとめ

今回はSlickを使ってdotsの位置やデザインをカスタマイズする方法を紹介しました。コピペで使えて便利だと思いますので、ぜひ試してみてください。