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; } } }
最後に

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