【コピペ用】slick dotsを四角にカスタマイズ｜色変更

投稿日 1月 21, 2023
著者しんぺー
カテゴリー Code
カテゴリー CSS
カテゴリー HTML
カテゴリー jQuery

slickのdotsを長方形にしたい人

slickのdotsはデフォルトで丸いから四角くするの手間だなぁ。
コピペ用にコード置いときたいな。

しんぺー

いつも使っているコードを共有しますね

完成形のイメージ

こんな感じの長方形にスタイリングしたdotsです。
現在のスライドは赤色にしています。

See the Pen slick dots by shimpei (@shimpei) on CodePen.

コピペ用CSS

スタイルはこんな感じです。
デザインに合わせて適宜変更下さい。
最低限のスタイリングをしているので、使いまわしやすく時短で実装できると思います。

HTMLやslickオプションの記述はCodePenを参照ください。

.slick-dots {
  position: relative;
  z-index: 3;

  // 位置
  margin: -20px auto;
  text-align: center;

  li {
    display: inline-block;
    margin: 0 5px;
  }
  button {
    padding: 0;
    color: transparent;
    outline: none;
    width: 40px;
    border: unset;
    height: 4px;
    display: block;
    background: #fff;
    cursor: pointer;
  }
  .slick-active {
    button {
      background: red;
    }
  }
}