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

Webflow Optimize interface showing the analytics dashboard with conversion optimization opportunities, traffic tracking, and organic source insights.
Documentation
Webflow

Optimize by Webflow: The AI-Powered CRO Tool for Marketers

Optimize by Webflow: The AI-Powered CRO Tool for Marketers
Apple Inc. stock performance chart showing intraday price variations and market data in a dark interface.
Documentation
Development

Why and How to Integrate Financial Charts, Tables, and Data into Your Website

Why and How to Integrate Financial Charts, Tables, and Data into Your Website
Projection of the Digidop logo on a building facade in a major city at night, symbolizing brand visibility.
Storytelling
Digidop

Was it a good idea (or not) to name our company Digidop?

Was it a good idea (or not) to name our company Digidop?

Want to turn your website into your most valuable asset?

Contact us today