How to limit the number of visible pages in pagination with (JavaScript-Jquery)

Question

I want to create a page layout without using a plugin.

The current page is like this and brings up all the pages.

But I want the page to show me that way.

in page 1

1 2 3 4 5 ... // selected 1

in page 2

1 2 3 4 5 6 ... //selected 2

in page 3

1 2 3 4 5 6 7 ... //selected 3

... in page 7

3 4 5 6 7 8 9 10 11 ... // selected 7

The Html code is written as follows

<nav>
        <ul data="@Model.TotalPage" data-id="@Model.CurrentPageNumber" class="pagination justify-content-center">
            @{
                for (int i = 1; i <= Model.TotalPage; i++)
                {
                    <li class="page-item @(i == Model.CurrentPageNumber ? "active" : "")">
                        <a class="bPageNumber page-link">@i</a>
                    </li>
                }
            }
        </ul>
</nav>

Answer 1

I think wrap both component in a single component like pagesComponent Slider // it may be your pagination

"When Pages component will render it will pass the hard core data to slider like page component 1

page component 1? slider will be 1,2,3,4: page compoenent 2? slider will be 1,2,3,4,5,6,7,8 and so one "