Pagination
The Pagination element is a user interface pattern commonly seen in digital products. It displays a series of visual elements or numbers that represent different pages or sections of content. Each pagination element or number corresponds to a specific page or content section and can be accessed through interaction with it.
Structure
Structurally, a pagination consists of several elements or numbers positioned next to each other. In the case of the GROW design system, these elements are small squares placed next to each other, separated by uniform spacing.
States
A pagination can have two states, the active and the inactive one:
Active:
Fill: light green (#65AC1E)
Inactive:
Fill: pale green (#E0EED2)
Use case
In case of the GROW design system, paginations are mainly used for:
Navigating through image galleries or carousels: It's widely used in image sliders, product carousels, and photo galleries to indicate the number of slides or images and allows users to navigate between them.
Space-saving navigation: When screen space is limited, especially on mobile devices, dot pagination offers a space-efficient alternative to traditional numbered pagination or navigation menus.
Best practice
When implementing element based pagination, it is important to follow best practices such as providing clear visual feedback for the active state.
However, dot pagination may not be suitable for scenarios where users need to quickly jump to a specific page or when there is a large number of pages, as it can become difficult to identify the current position or navigate precisely.
In such cases, a combination of pagination and numbered pagination or other navigation aids may be more appropriate.
For our application, we suggest using an infinite loop for sliders. This means that the slider will restart from the beginning after reaching the last slide and continue endlessly.