CODE WEBSITE Edit : 2020.11.02 Update : 2023.01.30

slickのdotsボタンを左右真ん中に配置するときのポイント

slickを使ったスライダーを作ってる際に、dotsボタンがうまく真ん中配置にならない場合があります。そんなときの確認するポイントです。

Contents

HTML
CSS

HTML

Slickを設置し、dotsボタンを表示するように設定した場合、以下のようなslick-dotsというクラスがついたdotsボタンが、slick-listの下に自動で生成されます。

<ul class="slick-dots">
 <li class="slick-active"><button type="button" >1</button></li>
 <li ><button type="button" >2</button></li>
 </ul>

</ul>

CSS

cssを設定することで、dotsボタンの色や形、位置など好きなように設定できますが、スライダー画像の下部に真ん中寄せで設置したい場合のポイントは下記。
①slick-dotsにwidth:100%を設定する。
②slick-dotsにtext-align:center;
③slick-dots liを横並びにする際に、float:left;ではなく、display:inline-blockを設定する。

.slick-dots {
    overflow: hidden;
    width: 100%; /*ポイント*/
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;　/*ポイント*/
    margin-top: 15px;
}
.slick-dots li {
  position: relative;　
  display: inline-block; /*ポイント*/
  margin: 0 7px;
  max-width: 13px;
  padding: 0;
  border: 1px solid #707070;
  width: 13px;
  height: 13px;
  border-radius: 100%;
  cursor: pointer;
}