Free Webflow Functions

img

Chrome Extension

img
Back

CMS Pagination

Dynamic Webflow CMS Pagination with the best collection

Cloneable

Documentation

Documentation

Step 1

Copy the CMS pagination <script> and paste into the <before closing body> of your page

                                <script src="https://flowgiri.com/js-library/cms-pagination.min.js"></script> 
                              

Step 2

1. In Webflow, create a dynamic collection and add the desired fields to it.

2. Create a CMS Collection Page that displays the dynamic content using a Collection List element and add flowgiri-pagination-control attribute to the collection list wrapper and pass the attribute value as load-more

Name:

flowgiri-pagination-control

Value:

"load-more"

3. Enable pagination option

4. Add a button and add flowgiri-load-more attribute to the button. When click on this button the content will load.

Name:

flowgiri-load-more

Value:

" "

5. If you want infinite scroll to load data then pass the value as infinite in the flowgiri-pagination-control attribute. In this time no need to create a button. This infinite will automatically load data when scroll down.

Name:

flowgiri-pagination-control

Value:

"infinite"

Get the latest updates to your inbox.