Paginator with limited number of pages displayed at once

The default paginator markup provided by most plugins typically will render out a single item for every page present in the paginated collection. The following markup will allow you to hide all pages except for a given buffer zone around the current page as well as the first and last pages. Some visual styling included as well.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

    .paginator-container {
        font-family: 'Poppins', sans-serif;
        text-align: center;
        background: #20b2aa;
        padding: 1em;
    }

    .paginator {
        display: inline-block;
        padding: .75em;
        margin: 0;
        background: white;
        border-radius: 50px;
    }

    .paginator > li {
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
    }

    .paginator > li > * {
        display: block;
        border-radius: 50%;
        padding: .5em;
        width: 1.5em;
        height: 1.5em;
        text-align: center;
        line-height: 1.5em;
        text-decoration: none;
        color: #333;
    }

    .paginator > li.prev > *,
    .paginator > li.next > * {
        width: auto;
    }

    .paginator > li.prev > * {
        border-radius: 25px 5px 5px 25px;
    }
    .paginator > li.next > * {
        border-radius: 5px 25px 25px 5px;
    }

    .paginator > li.active > *,
    .paginator > li > *:hover {
        transition: all .4s ease-in;
        background: #20b2aa;
        color: white;
    }
</style>

{% set paginatedCollection = records %}
{% set pageParam = 'page' %}
{% set beforePage = 3 %}
{% set afterPage = 3 %}
{% set pageTruncateStart = 6 %}
{% set alwaysShow = [1, paginatedCollection.lastPage] %}

{% if paginatedCollection.lastPage > 1 %}
    <div class="paginator-container">
        <ul class="paginator" role="menubar" aria-label="Pagination">
            {% if paginatedCollection.currentPage > 1 %}
                <li class="prev"><a href="{{ this.page.baseFileName | page() }}?{{ pageParam }}={{ paginatedCollection.currentPage - 1 }}">< Previous</a></li>
            {% endif %}

            {% for page in 1..paginatedCollection.lastPage %}
                {% set distanceFromCurrent = paginatedCollection.currentPage - page %}
                {% if
                    not (page in alwaysShow)
                    and (
                        (
                            paginatedCollection.currentPage > (pageTruncateStart - 1)
                            and distanceFromCurrent > beforePage
                        )
                        or (distanceFromCurrent < (0 - afterPage))
                    )
                %}
                    {% if not displayedDots %}
                        <li><span>..</span></li>
                    {% endif %}
                    {% set displayedDots = true %}
                {% else %}
                    {% set displayedDots = false %}
                    <li class="{{ paginatedCollection.currentPage == page ? 'active' : '' }}">
                        <a href="{{ this.page.baseFileName | page() }}?{{ pageParam }}={{ page }}">{{ page }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            {% if paginatedCollection.lastPage > paginatedCollection.currentPage %}
                <li class="next"><a href="{{ this.page.baseFileName | page() }}?{{ pageParam }}={{ paginatedCollection.currentPage + 1 }}">Next ></a></li>
            {% endif %}
        </ul>
    </div>
{% endif %}