How can I create a CMS slider using pagination in Webflow?
TL;DR
- Create and connect a CMS Collection List, enable pagination with 1 item per page, and style it like a slider using flex layout and hidden overflow.
- Build custom next/previous buttons with interactions that trigger Webflow’s native pagination to simulate slider navigation.
To create a CMS-powered slider using pagination in Webflow, you'll need to combine a Collection List with pagination and custom slider navigation (not the native Webflow slider element).
1. Set Up Your CMS Collection
- Create or use an existing Collection (e.g., Testimonials, Projects).
- Add the necessary fields like Image, Name, Title, or Description.
2. Add a Collection List to the Page
- Drag a Collection List onto the page.
- Connect it to your CMS Collection.
3. Enable Pagination on the Collection List
- With the Collection List selected, go to the Element Settings panel.
- Check “Paginate items” and set the “Items per page” to the number of items per slide (usually 1 for a real slider effect).
4. Style the Collection Item Like a Slider
- Style each Collection Item (slide) using flex or grid as needed.
- Set the Collection List Wrapper to have a fixed size (e.g., set width and overflow: hidden).
- Set the Collection List to display: flex, with horizontal scroll behavior if desired.
5. Build Custom Pagination Controls
Webflow’s default pagination only gives "Next" and "Previous" buttons. To simulate a true slider:
- Design your own “Next” and “Previous” buttons outside the Collection List.
- Set custom interactions on these buttons using Webflow’s Click → Page Load → Click Trigger to trigger the CMS pagination buttons.
- Select Webflow’s built-in "Next" and "Previous" buttons.
- Give them unique IDs or classes like
.cms-next,.cms-prev. - Create interactions that click the Webflow-built buttons when your custom buttons are clicked (use the "Click Trigger" → "Mouse Click (tap)" → "Start an Animation" → "Click Element").
6. Optional: Add Slide Transition Animation
Since CMS pagination reloads the visible item, you can:
- Use Page Load Animations to fade in the content.
- Use Custom Code (if needed) to enhance the transition feel, such as by adding smooth fades.
Summary
To create a CMS slider with pagination in Webflow, use a Collection List with pagination, custom-style the list as a slider, and create custom next/previous buttons that trigger Webflow’s built-in pagination programmatically. This allows you to simulate a dynamic CMS slider without relying on third-party integrations or code-heavy solutions.