Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.
List Previous Next
Create previous and next items on Webflow CMS Templates.
For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.
Required attributes
List
Add to Collection List or Collection List Wrapper
Previous
Add to Div Block
Next
Add to Div Block
Previous Empty
To Div Block, Text Element, Button, Link Block, Text Link
Next-empty
To Div Block, Text Element, Button, Link Block, Text Link
Add this <script> inside the <head> tag of your page or project
This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .
Add these required attributes to the elements
List
For this Solution to work, it must reference a Collection List in the current page, that displays all Collection Items.
This attribute is added to this Collection List. The List is used to create the "Previous" and "Next" content — the content for each Collection Item of the List will populate the Previous and Next blocks.
The list will position the Previous item in the previous element and the Next item in the next element, exactly as they're designed and styled in the Collection List.
Previous
This Div Block serves as the parent container for the "Previous" CMS Item in the list. The content of the "Previous" item will be shown inside of it.
Next
This Div Block serves as the parent container for the "Next" CMS Item in the list. The content of the "Next" item will be shown inside of it.
Check that the Collection Item contains a link to the Current page
Link in the List
Each item must have a URL Link to its CMS Collection Page (item) page.
Using the URL link to the Template page, Attributes will search in this Collection List for the current item, identifying the CMS Template page the user is viewing. From the current Item, Attributes will determine the Previous and Next item.
Publish your project! Done, easy right?
Previous Empty
An optional element that displays a custom 'empty' message if there is no "Previous" item.
Without this setting, no message will appear when a "Previous" item is absent.
Next Empty
An optional element that displays a custom 'empty' message if there is no "Next" item.
Without this setting, no message will appear when a "Next" item is absent.