Pagination

HTML

<nav class="kx-pagination2">
    <ul class="kx-pagination-list kx-flex flex-nowrap">
        <li class="kx-pagination__item kx-item-pre ">

            <i class="kx-icon kx-icon--size-base kx-icon--disabled">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-left"></use>
        </svg>
    </i>
        </li>

        <li class="kx-pagination__item kx-item-page kx-pagination-page--active">

            1
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="2"> 2</a>
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="3"> 3</a>
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="4"> 4</a>
        </li>

        <li class="kx-pagination__item kx-item-page ">

            <a href="#" title="5"> 5</a>
        </li>

        <li class="kx-pagination__item kx-item-next ">

            <a href="#" title="Next page"><i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i></a>
        </li>
    </ul>
</nav>

View

<nav class="kx-pagination2">
    <ul class="kx-pagination-list kx-flex flex-nowrap">
    {%- for page in pages -%}
        {% if page.type == 'prevnext' %}
            <li class="kx-pagination__item {{page.class}} {% if page.active %}kx-pagination__item--disabled{% endif -%}">
            {% if page.disabled %}
                {% render '@icon', { type: 'icon', symbol: page.icon.symbol, size: page.icon.size, classes: ['kx-icon--disabled'] } %}
            {% else %}
                <a href="#" title="{{ page.text}}">{% render '@icon', { type: 'icon', symbol: page.icon.symbol, size: page.icon.size } %}</a>
            {% endif -%}
            </li>
        {% elseif page.type == 'truncated' %}
            <li class="kx-pagination__item {{page.class}} kx-pagination__item--truncated" title="{{page.text}}">
                {% render '@icon', { type: 'icon', symbol: page.icon.symbol, size: page.icon.size } %}
            </li>
        {% else %}
            <li class="kx-pagination__item {{page.class}} {% if page.active %}kx-pagination-page--active{% endif -%}" >
            {% if page.active %}
                {{page.text}}
            {% else %}
                <a href="#" title="{{ page.text}}"> {{page.text}}</a>
            {% endif -%}
            </li>
        {% endif -%}
    {% endfor -%}
    </ul>
</nav>