How to show numbered pagination but hide some of the pages?

[rinart73]

I know how to show page numbers:

pagination: {
    el: ".swiper-pagination",
    clickable: true,
    renderBullet: (index, className) => {
        return (
            '<span class="' +
            className +
            '">' +
            (index + 1) +
            "</span>"
        );
    },
},

I'm trying to make so 2 first, 2 last and also previous, current and next pages are shown. And the rest is hidden and replaced with dots.
Say we have 12 pages:

1:  1  2  3 .. 11 12
2:  1  2  3 .. 11 12
3:  1  2  3  4 .. 11 12
4:  1  2  3  4  5 .. 11 12
5:  1  2  3  4  5  6 .. 11 12
6:  1  2 ..  5  6  7 .. 11 12
7:  1  2 ..  6  7  8 .. 11 12
8:  1  2 ..  7  8  9 10 11 12
9:  1  2 ..  8  9 10 11 12
10: 1  2 ..  9 10 11 12
11: 1  2 .. 10 11 12
12: 1  2 .. 10 11 12

I have the algorithm itself:

function calculatePaginationGaps(
    currentPage,
    pageCount,
    leftSpace,
    centerSpace,
    rightSpace
) {
    leftSpace = leftSpace ?? 2;
    centerSpace = centerSpace ?? 1;
    rightSpace = rightSpace ?? 2;

    let gaps = [];

    if (currentPage - centerSpace > leftSpace + 2) {
        let end = currentPage - centerSpace - 1;
        if (currentPage === pageCount) {
            end--;
        }
        gaps.push({
            start: leftSpace + 1,
            end: end,
        });
    }
    if (currentPage + centerSpace < pageCount - rightSpace - 1) {
        let start = currentPage + centerSpace + 1;
        if (currentPage == 1) {
            start++;
        }
        gaps.push({
            start: start,
            end: pageCount - rightSpace,
        });
    }

    return gaps;
}

What would be the proper approach here?

1. Create all bullets and dynamically hide them? And for dots use CSS order to move them in correct position? This seems weird.
2. Re-create pagination after every transition? But then I won't be able to use CSS transitions on pagination buttons.