Handlebars template adapted from collections, but markup more like WP because it has more a11y.
Icons included here from sprite-sheet, but they could be inlined.
TODO:
- change WP markup
- get ellipsis rules from collections
<div class="c-pagination">
<nav class="c-pagination__links" aria-label="Pagination">
<span aria-current="page" class="page-numbers"><span class="u-visually-hidden">You're on page</span>
1</span>
<a class="page-numbers" href="#2">2</a>
<a class="page-numbers" href="#3">3</a>
<a class="page-numbers" href="#4">4</a>
<a class="page-numbers" href="#5">5</a>
<a class="page-numbers" href="#6">6</a>
<a class="page-numbers" href="#7">7</a>
<a class="page-numbers" href="#8">8</a>
<a class="page-numbers" href="#19">19</a>
<a class="next page-numbers" href="">Next <span class="u-icon"><svg>
<use xlink:href="../../assets/icons/sprite.symbol.svg#arrow-right" />
</svg></a>
</nav>
</div>
<div class="c-pagination">
<nav class="c-pagination__links" aria-label="Pagination">
{{#if pagination.isFirst}}
{{else}}
<a class="page-numbers" href="{{pagination.links.prev}}">Previous</a>
{{/if}}
{{#each pagination.links.pages}}
{{#if this}}
{{#if this.isCurrent}}
<span aria-current="page" class="page-numbers"><span class="u-visually-hidden">You're on page</span>
{{this.pageNumber}}</span>
{{else}}
<a class="page-numbers" href="#{{this.pageNumber}}">{{this.pageNumber}}</a>
{{/if}}
{{/if}}
{{/each}}
{{#if pagination.isLast}}
{{else}}
<a class="next page-numbers" href="{{pagination.links.next}}">Next <span class="u-icon"><svg>
<use xlink:href="{{path '/assets/icons/sprite.symbol.svg#arrow-right'}}" /></svg></a>
{{/if}}
</nav>
</div>