A paginator to move to the next page, you know the drill:

Screenshot of anura-paginator



required: yes, live: yes, default: supplied by <anura-gallery> when used inside

Which component this paginator controls. This is done automatically when used inside of <anura-gallery>, but you can also put anura-paginator anywhere else (e.g. a footer), but then you need to tell it what to control.


required: no, live: no, default: -

When set to auto, the pagination buttons will disappear and be replaced by a single "load more" button. When this button scrolls into view, the next page will be fetched and appended automatically.

Screenshot of auto-mode


required: no, live: no, default: true

For mode="auto", detect when the view has been scrolled in order to load in the next page. Setting this to false will cause no scroll listener to be attached to the window. Users are left to click the "load more" button on their own.


paginate (outbound)


Instruct <anura-gallery> to display the selected page number (by firing the event on the configured parent).


<nav part="paginator-nav">
    <button part="paginator-button paginator-prev">
        <anura-icon part="paginator-icon"></anura-icon>
    <button part="paginator-button paginator-next">
        <anura-icon part="paginator-icon"></anura-icon>
    <span part="paginator-pages">
        <button part="paginator-button paginator-page"></button>
        <!-- snip, repeats -->
    <span part="paginator-counter"></span>

E.g. colorize the prev- and next-buttons (inside an anura-gallery):

anura-gallery::part(paginator-button) { color: green; }