January 20, 2023
You must have access to add custom code to your Webflow project.
Today, We’ll discuss how to create CMS slider in Webflow using Webflow’s native slider and Finsweet’s CMS slider.
Follow these simple stpes to create CMS powered slider in Webflow using Finsweet library:
Let’s discuss above steps in detail:
To covert Webflow slider into CMS powered slider you need to call script from Finsweet library. Here’s the script you can copy to your project’s header area.
<!-- [Attributes by Finsweet] CMS Slider -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>
Next step is to add CMS collection to the page where you want the CMS slider. For eg. I’m using a Blog Posts collection to create a CMS slider for some blogs.
After adding a collection to your page. Select Collection List as shown in the below image. Make sure your don’t select Collection Wraper.
Here are the key and values that you need to add to your Collection list’s custom attributes:
fs-cmsslider-element = “list”
The last step in this process is to add a slider. Once you add a native Webflow slider add this custom attribute values to your slider from settings panel.
fs-cmsslider-element = “slider”
Publish your page now to see your new CMS powered slider without custom coding.
TweakDesigns is a Webflow certfified partner agency. We design and build Webflow websites, templates and integrate SEO. Subscribe to our newsletter or talk to our Webflow expert today for your queries.
Subscribe for updates from TweakDesigns—fresh insight delivered to your inbox every week.
Need help to start a custom project or integrate a third party app into your Webflow project? Our team is ready to work to find the best solution that fits your needs.Schedule your meeting now!