<!-- Default -->
<div class="pagination">
<span class="btn btn-round btn-toggle pagination_button" disabled aria-hidden="true">
<i class="i i-arrow-left u-pull-top-4"></i>
</span>
<div class="pagination_pages">
<a href="#" class="pagination_page pagination_page-middle is-num- is-current" aria-label="Go to page">
1
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
2
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
3
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
4
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
5
</a>
</div>
<a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the next page">
<i class="i i-arrow-right u-pull-top-4"></i>
</a>
</div>
<!-- Last Page Highlighted -->
<div class="pagination">
<a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the previous page">
<i class="i i-arrow-left u-pull-top-4"></i>
</a>
<div class="pagination_pages">
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
1
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
2
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
3
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
4
</a>
<a href="#" class="pagination_page pagination_page-middle is-num- is-current" aria-label="Go to page">
5
</a>
</div>
<span class="btn btn-round btn-toggle pagination_button" disabled aria-hidden="true">
<i class="i i-arrow-right u-pull-top-4"></i>
</span>
</div>
<!-- All Buttons Active -->
<div class="pagination">
<a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the previous page">
<i class="i i-arrow-left u-pull-top-4"></i>
</a>
<div class="pagination_pages has-first-last">
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
1
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
2
</a>
<a href="#" class="pagination_page pagination_page-middle is-num- is-current" aria-label="Go to page">
3
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
4
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
5
</a>
</div>
<a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the next page">
<i class="i i-arrow-right u-pull-top-4"></i>
</a>
</div>
<!-- Lot Of Pages -->
<div class="pagination">
<a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the previous page">
<i class="i i-arrow-left u-pull-top-4"></i>
</a>
<div class="pagination_pages has-first-last">
<a href="" class="pagination_page is-first" aria-label="Go to the first page">
1
</a>
<span class="pagination_placeholder">…</span>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
6
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
7
</a>
<a href="#" class="pagination_page pagination_page-middle is-num- is-current" aria-label="Go to page">
8
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
9
</a>
<a href="#" class="pagination_page pagination_page-middle is-num-" aria-label="Go to page">
10
</a>
<span class="pagination_placeholder">…</span>
<a href="" class="pagination_page is-last" aria-label="Go to the last page">
20
</a>
</div>
<a href="" class="btn btn-round btn-toggle pagination_button" aria-label="Go to the next page">
<i class="i i-arrow-right u-pull-top-4"></i>
</a>
</div>
<div class="pagination">
{{#if prevPage }}
<a
href="{{ prevPage.url }}"
class="btn btn-round btn-toggle pagination_button"
aria-label="Go to the previous page">
<i class="i i-arrow-left u-pull-top-4"></i>
</a>
{{ else }}
<span class="btn btn-round btn-toggle pagination_button" disabled aria-hidden="true">
<i class="i i-arrow-left u-pull-top-4"></i>
</span>
{{/if}}
{{#if hasFirstLast }}
<div class="pagination_pages has-first-last">
{{ else if firstPage }}
<div class="pagination_pages has-first">
{{ else_if lastPage }}
<div class="pagination_pages has-last">
{{ else }}
<div class="pagination_pages">
{{/if}}
{{#if firstPage }}
<a
href="{{ firstPage.url }}"
class="pagination_page is-first"
aria-label="Go to the first page">
{{ firstPage.pageNum }}
</a>
<span class="pagination_placeholder">…</span>
{{/if}}
{{#each pages }}
<a
href="{{ url }}"
class="pagination_page pagination_page-middle is-num-{{index}}{{#if isCurrent }} is-current{{/if}}"
aria-label="Go to page">
{{ pageNum }}
</a>
{{/each}}
{{#if lastPage }}
<span class="pagination_placeholder">…</span>
<a
href="{{ lastPage.url }}"
class="pagination_page is-last"
aria-label="Go to the last page">
{{ lastPage.pageNum }}
</a>
{{/if}}
</div>
{{#if nextPage }}
<a
href="{{ nextPage.url }}"
class="btn btn-round btn-toggle pagination_button"
aria-label="Go to the next page">
<i class="i i-arrow-right u-pull-top-4"></i>
</a>
{{ else }}
<span class="btn btn-round btn-toggle pagination_button" disabled aria-hidden="true">
<i class="i i-arrow-right u-pull-top-4"></i>
</span>
{{/if}}
</div>
/* Default */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"prevPage": null,
"nextPage": true,
"hasFirstLast": null,
"firstPage": null,
"lastPage": null,
"pages": [
{
"isCurrent": true,
"pageNum": 1,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 2,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 3,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 4,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 5,
"url": "#"
}
]
}
/* Last Page Highlighted */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"prevPage": true,
"nextPage": null,
"hasFirstLast": null,
"firstPage": null,
"lastPage": null,
"pages": [
{
"isCurrent": null,
"pageNum": 1,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 2,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 3,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 4,
"url": "#"
},
{
"isCurrent": true,
"pageNum": 5,
"url": "#"
}
]
}
/* All Buttons Active */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"prevPage": true,
"nextPage": true,
"hasFirstLast": true,
"firstPage": null,
"lastPage": null,
"pages": [
{
"isCurrent": null,
"pageNum": 1,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 2,
"url": "#"
},
{
"isCurrent": true,
"pageNum": 3,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 4,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 5,
"url": "#"
}
]
}
/* Lot Of Pages */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"prevPage": true,
"nextPage": true,
"hasFirstLast": true,
"firstPage": {
"pageNum": 1
},
"lastPage": {
"pageNum": 20
},
"pages": [
{
"isCurrent": null,
"pageNum": 6,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 7,
"url": "#"
},
{
"isCurrent": true,
"pageNum": 8,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 9,
"url": "#"
},
{
"isCurrent": null,
"pageNum": 10,
"url": "#"
}
]
}
There are no notes for this item.