Pagination

<nav aria-label="pagination" class="pg">
  <button class="pgnav" id="pgp">‹</button>
  <ol id="pgl">
    <li><button aria-current="page">1</button></li><li><button>2</button></li><li><button>3</button></li><li><button>4</button></li><li><button>5</button></li>
  </ol>
  <button class="pgnav" id="pgn">›</button>
</nav>

.pg{display:flex;align-items:center;gap:6px}
.pg ol{display:flex;list-style:none;gap:5px;margin:0;padding:0}
.pg button{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12px;cursor:pointer}
.pg li button[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.pgnav{background:none}

const btns = [...document.querySelectorAll('#pgl button')];
const prev = document.getElementById('pgp'), next = document.getElementById('pgn');
let cur = 0, auto = true;
function paint() {
  btns.forEach((b, i) => i === cur ? b.setAttribute('aria-current', 'page') : b.removeAttribute('aria-current'));
  prev.disabled = cur === 0; next.disabled = cur === btns.length - 1;
}
paint();
btns.forEach((b, i) => b.addEventListener('click', () => { auto = false; cur = i; paint(); }));
prev.addEventListener('click', () => { auto = false; cur = Math.max(0, cur - 1); paint(); });
next.addEventListener('click', () => { auto = false; cur = Math.min(btns.length - 1, cur + 1); paint(); });
setInterval(() => { if (!auto) return; cur = (cur + 1) % btns.length; paint(); }, 1100);