CMS: Adding and Setting Up a Pagination Bar
Use a pagination bar to provide visitors with a simple and intuitive way to browse through a large collection of items within a repeater or gallery. A pagination bar lets visitors navigate through 'pages', or sets of items displayed on a dynamic page. The dataset's 'Maximum items displayed' field determines the maximum number of items that appear in each 'page'. The number of pages displayed by the pagination bar is calculated based on the total number of collection items retrieved by the dataset and the 'Maximum items displayed' field. For instance, if you have 50 visible items in your collection and you've set the 'Maximum items displayed' field to 10, your pagination bar will display 5 pages (50/10=5). Each page represents a set of items, and the pagination bar allows your visitors to navigate through these sets. Important:Pagination bars are not yet available in the Studio Editor. Vote for this feature if you would like to see it in the future. Before you begin:Connect a repeater or gallery to the dynamic dataset in a dynamic list page or dynamic item page displaying items in categories. Step 1 | Add and customize a pagination barAdd a pagination bar to your site and customize it to match your design needs. To add and customize a pagination bar: 
Go to your editor. Go to the relevant dynamic page that can list multiple items:
    
Click Pages & Menu  on the left side of the editor. Click Dynamic Pages. Click the relevant dynamic page that can display multiple items. 
Note: Pagination bars are not relevant for dynamic item pages that can only display 1 item at a time.   
Add a pagination bar: 
    
Click Add Elements  on the left side of the editor. Click Interactive. Click Pagination Bar.  Click and drag the pagination bar you want to use onto the page.   
Customize the layout and design of the pagination bar: LayoutClick Change Layout to adjust the layout and choose from the following options:
Choose a navigation type:

Click: Multiple page numbers display and visitors click to go to the relevant page of items. Input: Visitors enter the page number they want to view in a field next to the total number of pages. Arrows: Visitors click navigation arrows or text to go to the next or previous page of items.   Show first/last buttons: Enable the toggle to show navigational arrows or text that takes visitors to the first or last page of items. Show first/last pages: (Click type only) Enable the toggle to show the first and last page number if there's not enough space to show all the pages. Show total pages: (Input type only) Enable the toggle to show the last page number if there's not enough space to show all the pages. Show current page: (Arrows type only) Enable the toggle to show the page number that the visitor is currently viewing. Alignment: Choose how the pages and arrows align: Left, Center, Right, or Spread Choose navigation buttons: Choose whether to show arrows or text as the navigation buttons. For text, click Button Text and enter the text you want to show in the relevant fields. Direction: Choose the page number direction: Left to right or Right to leftDesign
Click the Design icon  on the pagination bar.  Choose a preset design then click Customize Design. Edit the fill color & opacity, border, corners, shadow, and text used in your pagination bar.   Step 2 | Connect to the CMSConnect your pagination bar to the same dataset that connects to your repeater or gallery. Then resize your pagination bar and test it out in preview mode. When it's ready to go live, publish your site. To connect the pagination bar to the CMS: 
Click the pagination bar.  Click the Connect to CMS icon . Click the Choose a dataset drop-down and select the same dataset that connects to your repeater or gallery. 
Click and drag the edges of your pagination bar to resize it.  Click Preview to test your pagination bar.  Click Publish if you are ready to make the changes go live.