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

投稿日 1月 21, 2023
更新日 4月 2, 2024
著者しんぺー
カテゴリー 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;
    }
  }
}