Create a Webflow CMS slider

Webflow CMS Slider: Use dynamic content in your sliders

Webflow has great options for creating impressive sliders. But what if you want to centrally control content and automatically update it on multiple pages? Right here comes the Webflow CMS Slider into the game! In this tutorial, you'll learn how to connect your slider to CMS content and flexibly control it.

Why a CMS-supported slider?

Manual updates are time-consuming and error-prone — especially if you use the same slider multiple times on your website. A classic example is a Testimonial slider: You want to change a customer's position, but you would have to do this in every single slider element. With a CMS-supported slider, you can change content once and it's updated everywhere.

Since Webflow doesn't provide native CMS sliders, there are two solutions:

1. External slider libraries like Swiper.js (requires extensive custom code).
2. FinSuite CMS Slider, an external scripting solution that can be seamlessly integrated into existing Webflow sliders.

In this tutorial, we will use the second variant.

1. Prepare your slider

If you don't have a slider yet, create one first Webflow slider with static content. You can find instructions on how to do this in our previous blog article: Webflow Slider 101.

If you already have a working slider, you can go straight to the next step.

2. Set up CMS collection

1. Create a CMS Collection (e.g. “testimonials”).
2. Add relevant fields add:
   • name
   • Position & company
   • Portrait image
   • Rating (optional)
   • Category tag (optional, for different pages)
3. Create a few entries to fill the slider.

3. Connect Slider to CMS Collection

1. Add CMS collection list
   • Place a CMS Collection List on the page (position doesn't matter, but must be visible).
   • Connect it with your Testimonials Collection.
2. Pulling slider content from CMS
   • Copy a existing testimonial card into the CMS list entry.
   • Connect Texts, images and star ratings with CMS data.