JavaScript Dynamic Pagination Hide Buttons

I have created an Array of objects. This Array contains thousands of objects.

For example:

let products = [
{name: "Name 1"},
{name: "Name 2"},
{name: "Name 3"},
{name: "Name 4"},
{name: "Name 5"}]

For each object, I have created a card using this code:

for (let i of products) {

  //Create Card
  let card = document.createElement("div");
  //Card should have category and should stay hidden initially
  card.classList.add("card", i.category, "hide");
  // Add name to card
  let name = document.createElement("h1");
  name.innerText = i.name();

  card.appendChild(name);
  document.getElementById("products").appendChild(card);
}

I have dynamically paginated these objects to only show a maximum of 100 cards per page. I have done this using the following code:

let itemsPerPage = 100;
function loadPageNav() {
  for (let i = 0; i < items.length / itemsPerPage; i++) {
    const button = document.createElement('button');
    button.classList.add('btn');
    button.innerHTML = i + 1;
    button.addEventListener('click', (e) => {
      pageIndex = e.target.innerHTML - 1;
      loadItems();
    });
    nav.append(button);
  }
}

This works correctly. However, there are too many buttons on the page. If I am on page 10, all of the buttons show up. However, I only want the buttons containing pages 8 to 12 to show up.

The buttons currently look like this:
How the buttons look now

However, the buttons should look like this:
How the buttons should look

How could I hide the buttons that do not need to be shown?

This needs to be done in Vanilla JavaScript