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

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;
    }
  }
}

最後に

短かったですが今回は以上です。
些細なことなので記事にするか迷いましたが、自分が制作する中でよく活用していたので、「もしかしたら誰かの役に立つかも」と思い記事にしてみました。
製作時の助けになっていれば幸いです。

今回も最後までありがとうございました!