Tutorial to Create a CMS Slider on Webflow

Tutorial
3 min
Published on Mar 20, 2023
Updated on
CMS slider for Webflow with Finsweet attributes
Use AI to summarize this article
Key points

The goal of this tutorial is to utilize a collection (CMS) in Webflow as a data source to feed the slides of your Webflow slider.

This will enable you to create a customer review slider that automatically pulls data from your CMS.

(🍿 Video available at the end of this page)

Limitations of a Webflow Slider

Currently, it is not possible to natively use the CMS collections from your Webflow site as a data source for your CMS. But... fortunately... The Finsweet attributes are here to help.

Finsweet attributes are a set of 100% free products that you can easily integrate into your Webflow site (somewhat like plugins on WordPress) to add advanced functionalities to your website.

CMS Slider | Fs Attributes

Link to the official documentation for Finsweet's CMS slider

Finsweet Attributes CMS Slider Documentation
Official Finsweet Attributes CMS page

How to add the functionality in 3 steps?

  1. Copy the script and paste it into the head tag of your Webflow page
  2. Add the attribute "fs-cmsslider-element" to the "list" of your collection (the collection must be present on the page and connected to the collection you wish to use as a data source).
  3. Add the attribute "fs-cmsslider-element" to the "slider" element on your Webflow site

And... publish your site! 🎉🚀

Do you prefer video tutorials?

Discover how to integrate the CMS slider functionality on a Webflow site from A to Z in this French video tutorial.  (Solution with Finsweet Attributes)

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

Website redesign brief document titled "Brief" on a dark blue background
Documentation

Brief, specifications and RFP: scoping your website redesign and choosing the right agency

Brief, specifications and RFP: scoping your website redesign and choosing the right agency
Main entrance of VivaTech 2026 in Paris featuring the official 10th-anniversary event branding, Europe’s largest technology and innovation conference.
Events

Digidop at VivaTech: Two Days at the Heart of European Tech

Digidop at VivaTech: Two Days at the Heart of European Tech
Wide view of the 2036 by Yuri & Neil stage, bringing together more than 400 marketing leaders to discuss the future of the CMO role in the age of artificial intelligence.
Events
AI

Looking Back at Our Participation in 2036, Yuri & Neil’s Marketing Event for CMOs

Looking Back at Our Participation in 2036, Yuri & Neil’s Marketing Event for CMOs

Want to turn your website into your most valuable asset?

Contact us today