Webflow CMS Slider Tutorial [EASIEST nocode solution with FINSWEET CMS Slider]

Hi fellow Webflowers!
In this Webflow CMS Slider Tutorial, I'll show you how to control your slider content from one place by integrating Webflow's native slider with the CMS using Finsweet's CMS Slider. This is perfect for instances like testimonial sliders, where you might have the same slider across multiple pages and want to update content universally or display different testimonials on different pages.
What You'll Learn:
1. Setting Up Your Slider and CMS Collection
• Preparing your slider for CMS integration.
• Adding a CMS Collection List to your page.
• Connecting your testimonial cards to CMS fields like quote, image, name, position, and company.
2. Combining the Slider and Collection with Finsweet Attributes
• How to use Finsweet's CMS Slider script to link your slider with your CMS content.
• Adding custom attributes to your Collection List and Slider to make them work together.
• Optimizing script placement for better page speed.
3. Advanced Tips for Better Control Over Slider Content
• Maintaining consistent slide heights using custom CSS.
• Changing the order of your slides with a custom "Order" field in your CMS.
• Displaying different testimonials on different pages using a tag system with multi-reference fields.
• Filtering and sorting testimonials based on tags and names.
Why Use a CMS-Powered Slider?
• Unified Content Management: Update your slider content in one place, and see it reflected across your entire website.
• Flexibility: Display different content on different pages without rebuilding sliders from scratch.
• Efficiency: Avoid handling excessive custom code or external scripts by extending your current Webflow sliders.
####
Try Webflow:*
try.webflow.co...
####
Cloneable:
webflow.com/ma...
Finsweet CMS Slider:
finsweet.com/a...
####
Work with my studio:
www.designbase...
#webflow #webflowtutorial #webflowslider #webflowforbeginners #webflowcarousel #webflowcms #webflowcmsslider
*Affiliate Link

[@vivde435]

Works perfectly! Thanks for the tutorial. 🖖

[@chasewalker7015]

You're amazing, about to try this.

[@designbasestudio]

You‘re welcome!

[@abandco.creative]

Hi, thank you for the tutorial, it's been very clear and extremely helpful.
I have a CMS slider in the footer of a Collection Template page. I'm trying to hide the current item from the slider when viewing the same page it represents, but I'm having trouble achieving this. Could this be done using the method you've provided?

[@designbasestudio]

Yes, there should be a filter option in the collection list settings.

[@saleembabu1283]

It was very helpful.
How can i do if slider has nested collections ?

[@designbasestudio]

I would use swiper fir this.

[@rmo4762]

Thank you! I have the problem with Infinite scroll (carousel) it ist not showing as it should when you have lets say 3 Slider items at once and want to loop /repeat them fluently

[@designbasestudio]

There is a way to achieve this but this hack won’t work when you are using a webflow slider with cms and finsweet attributes. In your case I would suggest using SplideJS

[@Foused87]

Do you use Webflow variables? If so, for what purposes? How does this new feature impact your old full website build tutorial?

[@designbasestudio]

Sure, I use it, but explaining the impact is actually too much for a comment :)