January 20, 2023

How to Create a CMS Slider in Webflow Using Finsweet Attributes.

Ashok Chavada

Webflow Expert

How to Create a CMS Slider in Webflow Using Finsweet Attributes.

There are many ways to create dynamic or CMS slider is Webflow but that requires the knowledge of JavaScript and third-party libraries like Slick Slider, Owl Carousel and etc.

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:

  1. Add or Load Finsweet’s script to your preferred page in the header area of custom code.
  2. Add a collection and set collection list attribute’s values to fs-cmsslider-element = “list”
  3. Add Webflow’s native slider and set its attribute’s values to fs-cmsslider-element = “slider”. Note: Make sure you have only 1 item in the slider.

Let’s discuss above steps in detail:

Step 1: Add CMS slider script to your Webflow project

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>

Source: https://finsweet.com/attributes/cms-slider

Step 2: Add CMS collection to your page

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”

Step 3: Add Webflow’s native slider

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.

Thank you for reading!

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.

By clicking this button, you agree to our
Privacy Policy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Related posts

SEO

7 Ways to Increase Your Webflow Website Page Speed and Performance

Boost your Webflow website page loading speed without coding knowledge! Discover seven easy tricks to make sure your audience isn't waiting too long for a response.

read more

Ashok Chavada

April 10, 2023
Web Development

Webflow Costs: How Much Does a Webflow Website Cost in 2023?

Wondering how much a Webflow website costs? Look no further! This comprehensive guide breaks down all the factors that affect the price of a Webflow site.

read more

Ashok Chavada

April 10, 2023
Web Development

Top 5 Missing Features in Webflow and Their Solutions

Are you frustrated with the limitations of Webflow? Don't worry, we've got you covered. Learn how to solve the top 5 missing features in Webflow with this guide.

read more

Ashok Chavada

March 29, 2023
webflow professiona partner or freelancer expert badge