<!-- Default -->
<nav aria-label="Pagina navigatie">
<ul class="pagination">
<li>
<a href="#" aria-label="Vorige">
<span class="dso-previous" aria-hidden="true"></span>
</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li class="active">
<span aria-current="page">3</span>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#" aria-label="Volgende">
<span class="dso-next" aria-hidden="true"></span>
</a>
</li>
</ul>
</nav>
<!-- 1 1 -->
<nav aria-label="Pagina navigatie">
<ul class="pagination">
<li class="active">
<span aria-current="page">1</span>
</li>
</ul>
</nav>
<!-- 2 1 -->
<nav aria-label="Pagina navigatie">
<ul class="pagination">
<li class="active">
<span aria-current="page">1</span>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#" aria-label="Volgende">
<span class="dso-next" aria-hidden="true"></span>
</a>
</li>
</ul>
</nav>
<!-- 2 2 -->
<nav aria-label="Pagina navigatie">
<ul class="pagination">
<li>
<a href="#" aria-label="Vorige">
<span class="dso-previous" aria-hidden="true"></span>
</a>
</li>
<li>
<a href="#">1</a>
</li>
<li class="active">
<span aria-current="page">2</span>
</li>
</ul>
</nav>
<!-- 3 1 -->
<nav aria-label="Pagina navigatie">
<ul class="pagination">
<li class="active">
<span aria-current="page">1</span>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#" aria-label="Volgende">
<span class="dso-next" aria-hidden="true"></span>
</a>
</li>
</ul>
</nav>
<!-- 3 2 -->
<nav aria-label="Pagina navigatie">
<ul class="pagination">
<li>
<a href="#" aria-label="Vorige">
<span class="dso-previous" aria-hidden="true"></span>
</a>
</li>
<li>
<a href="#">1</a>
</li>
<li class="active">
<span aria-current="page">2</span>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#" aria-label="Volgende">
<span class="dso-next" aria-hidden="true"></span>
</a>
</li>
</ul>
</nav>
<!-- 3 3 -->
<nav aria-label="Pagina navigatie">
<ul class="pagination">
<li>
<a href="#" aria-label="Vorige">
<span class="dso-previous" aria-hidden="true"></span>
</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li class="active">
<span aria-current="page">3</span>
</li>
</ul>
</nav>
<nav aria-label="Pagina navigatie">
<ul class="pagination">
{% if current !== 1 %}
<li>
<a href="#" aria-label="Vorige">
<span class="dso-previous" aria-hidden="true"></span>
</a>
</li>
<li>
<a href="#">1</a>
</li>
{% endif %}
{% if (current !== count or count >= 4) and (current === count and current !== 1) %}
<li>
<a href="#">{{ current - 2 }}</a>
</li>
{% endif %}
{% if current >= 3 and ((current >= 3 and count <= 5) or (count > 5 and current !== count - 2)) %}
<li>
<a href="#">{{ current - 1 }}</a>
</li>
{% endif %}
<li class="active">
<span aria-current="page">{{ current }}</span>
</li>
{% if current <= (count - 2) and ((current <= 3 and count <= 5) or (current !== 3 and count > 5)) %}
<li>
<a href="#">{{ current + 1 }}</a>
</li>
{% endif %}
{% if current === 1 and count > (current + 2) %}
<li>
<a href="#">{{ current + 2 }}</a>
</li>
{% endif %}
{% if current !== count %}
<li>
<a href="#">{{ count }}</a>
</li>
<li>
<a href="#" aria-label="Volgende">
<span class="dso-next" aria-hidden="true"></span>
</a>
</li>
{% endif %}
</ul>
</nav>
/* Default */
count: 5
current: 3
/* 1 1 */
count: 1
current: 1
/* 2 1 */
count: 2
current: 1
/* 2 2 */
count: 2
current: 2
/* 3 1 */
count: 3
current: 1
/* 3 2 */
count: 3
current: 2
/* 3 3 */
count: 3
current: 3