パーツ番号 03-06-07 ・ CSSのみ

ドットのみページネーション

番号を持たない小さなドットが並ぶ、スライダーでよく見る形。画像ギャラリーの現在位置表示に向いています。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-06-07-pager">
          <span class="d03-06-07-dot"></span>
          <span class="d03-06-07-dot d03-06-07-active"></span>
          <span class="d03-06-07-dot"></span>
          <span class="d03-06-07-dot"></span>
          <span class="d03-06-07-dot"></span>
        </nav>

CSS

.d03-06-07-pager{display:flex;gap:10px;align-items:center;}
        .d03-06-07-dot{
          width:8px;height:8px;border-radius:50%;
          background:#d1d5db;
        }
        .d03-06-07-active{
          width:20px;border-radius:4px;
          background:#ec4899;
        }

クラス名 .d03-06-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。